最近在学Json,在网上也找过一些资料，觉得有点乱，在这里，我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互

使用Json,首先需要导入一些jar包，这些资源可以在网上下载到，然后导入到项目中即可。

首先我先把代码贴出来，有些地方会着重说明一下：

客户端代码如下：

<%@page pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.min.js" charset="utf-8"></script>

  <script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.easyui.min.js" charset="utf-8"></script>

  <link rel="stylesheet" href="../jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css" ></link>

  <link rel="stylesheet" href="../jquery-easyui-1.3.5/themes/icon.css" type="text/css" ></link>

  <script type="text/javascript" src="../jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>

  <script type="text/javascript" charset="utf-8">

  var loginAndRegDialog;

  $(function(){

    loginAndRegDialog=$('#loginAndRegDialog').dialog({

       closable:false,          //隐藏关闭按钮

       modal:true,              //模式化窗口，只可单击最上层的窗口

       buttons:[{text:'登录',

                 handler:function(){

                       $.ajax({

                         url:'../servlet/UserContro', //后台的路径，看具体情况定
                         data :{

                               name: $('#loginInputForm input[name=name]').val(),//传向服务器的数据
                               password:$('#loginInputForm input[name=password]').val()

                               },

                          dataType:'json',//接收的数据为json格式，这里还有其他方法，可以看我关于Json解析的那篇文章

                          success:function(data){   //Json为返回的Json对象，名字自己起

                            $.messager.alert('通知',data.msg);

                          },

                          error:function(){

                           $.messager.alert('通知',"错误");

                          }

                      }); 

                 }},{       //handler:按钮的点击事件

                 text:'注册',

                 handler:function(){

                                      }}]

    });

  });

  </script>

  </head>

  <body>

   <div  id="loginAndRegDialog" title="用户登录" style="width:250px;height:150px;">

   <form id="loginInputForm"  method="post">

     <table>

          <tr>

            <th>用户名</th>

            <td><input type="text" name="name"></td>

          </tr>

          <tr>

            <th>密  码</th>

            <td><input name="password" type="password"></td>

          </tr>

     </table>

    </form>

   </div>

  </body>

</html>

服务器端代码如下：

package thejavabean;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.SQLException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class UserContro extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

         	request.setCharacterEncoding("UTF-8");  //接收数据的编码格式

	        response.setCharacterEncoding("UTF-8"); //返回数据的编码格式为utf-8,防止客户端乱码

		response.setContentType("text/json");

    		PrintWriter out = response.getWriter();

		String name=request.getParameter("name");//接收数据
		String password=request.getParameter("password");

		String msg="";

		JSONObject  jobj = new JSONObject();//把要传向客户端的数据转为Json字符串
                jobj.put("msg",login(name,password));
		response.getWriter().write(jobj.toString());//向客户端返回数据

		out.flush();

		out.close();

	}

	public String login(String name,String password){

	    User user=new User();

	    user.setName(name);

	    user.setPassword(password);

	   	try {

			if(user.login()!=null)

			 	return "登录成功";

			 else

			    return "用户名或密码错误";

		} catch (SQLException e) {

			e.printStackTrace();

		}

	   	return null;

	 }

	 */

	public void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

	}

}

User 类

public class User {

     private String name;

     private String password;

  	public String getName() {

		return name;

	}

	public void setName(String name) {

		this.name = name;

	}

	public String getPassword() {

		return password;

	}

	public void setPassword(String password) {

		this.password = password;

	}

     DBConnection dbc=new DBConnection();

	//用户登录

	public User login() throws SQLException{

		Connection conn=null;

		PreparedStatement ps=null;

		ResultSet rs;

		User user=null;

		try{

		conn=dbc.getConnection();

		String sql="select * from [user] where name=? and password=?";

		ps=conn.prepareStatement(sql);

		ps.setString(1,name);

		ps.setString(2,password);

		rs=ps.executeQuery();

		if(rs.next()){

			user=new User();

			user.setName(rs.getString("name"));

			user.setPassword("password");

		}

		}finally{

		ps.close();

		conn.close();

		}

		return user;

	}

简单封装的DB:

public class DBConnection {

   private  String user="sa";

   private  String password="aaaaaa";

   private  String url="jdbc:sqlserver://localhost:1433;DatabaseName=team";

   private static String driverName = "com.microsoft.sqlserver.jdbc.SQLServerDriver";

   Connection conn;

   PreparedStatement ps;

   ResultSet rs;

   static{

	try {

		Class.forName(driverName);

	} catch (ClassNotFoundException e) {

	     System.out.println("驱动加载失败");

	}

   }

   public  Connection getConnection() throws SQLException{

		conn=DriverManager.getConnection(url,user,password);

	     return conn;

   }

}

玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互的更多相关文章

  1. 玩转Web之Json(一)-----easy ui+ajax + json 中关于Json的解析问题

    在easy ui中使用Ajax+Json实现前后的数据交互时,当后台数据传输到客户端是需对Json数据进行解析,这里将对Json数据解析做简单总结. (一) 对于服务器返回的数据若没有做类型说明,需要 ...

  2. Jquery Easy UI Datagrid 上下移动批量保存数据

    DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...

  3. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  4. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  5. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  6. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. JQuery Easy UI 简介

    [什么是JQuery Easy UI?] jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并 ...

  8. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  9. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

随机推荐

  1. hdu4223（dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4223 由于n范围较小,完全可暴力... #include <cstdio> #includ ...

  2. C++ Preprosessor import

    #import Attributes Provides links to attributes used with the #import directive. Microsoft Specific ...

  3. dedecms 获取描述信息限制字数

    对于我刚刚刚开始对于获取到了描述的信息,但是有些字数简直是太多了,显示的样式不好看,所以我就希望限制字数,所以我来告诉你们获取描述信息限制字数的语法吧[field:description functi ...

  4. html+css实现登录界面

    <!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...

  5. Nagios+pnp4nagios+rrdtool 安装配置为nagios添加自定义插件(三)

    nagios博大精深,可以以shell.perl等语句为nagios写插件,来满足自己监控的需要.本文写mysql中tps.qps的插件,并把收集到的结果以图形形式展现出来,这样输出的结果就有一定的要 ...

  6. ie6下margin双倍距的问题

    今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题 ...

  7. WPF遮蔽层的实现

    在一些项目中,难免会有耗时的加载,如果加载时没有提示,给人一种假死的感觉,很不友好,那么现在福利来啦,WPF版的模态窗体,先上效果图 实际效果指针是转动的,话不多说,一大批干货来袭 XMAL的代码 W ...

  8. testing and SQA_动态白盒測试

    一.软件測试技术: 黑盒:在不知道程序内部结构,仅仅知道程序结构的情况下採用的測试技术或策略. 白盒:在知道程序内部结构的情况下採用的測试技术或策略. 两种測试方法从不同的角度出发,反映了软件的不同側 ...

  9. 利用sendmsg和recvmsg来指定发送接口或者获取接收数据接口

    前言     sendmsg和recvmsg函数是一对相对下层的套接字发送.接受函数. 通过这对函数,我们能够设置或者取得数据包的一些额外的控制信息.这些信息中比較经常使用的就是本文要介绍的发送.接受 ...

  10. ProductHunt,TechCrunch和AppStore的差的值

    ProductHunt(产品狩猎)硅谷社区的新产品,起初只存在一个技术性的房子维修.然后进入YC训练营已经收到了几百美元的融资2. 这款产品的形式非常easy.粗产物似乎是一个节目的部位,加上一些评论 ...