最近在学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. oschina Web应用开发

    Web应用开发 SPDY开发包(13) HTML5开发相关(105) Pjax相关项目(4) 网站API(93) REST/RESTful项目(72) 响应式 Web 框架(27) 微信相关软件(63 ...

  2. Cocos2dx3.4 VS2013无法打开包括文件extensions/ExtensionExport.h解决的方法

    本来打算看白鹭引擎的.可是又被叫回来研究新引擎呢,不搞不知道,一搞发现cocos2dx新版本号3.4又有了一些变化. 我查了网上的资源,都没有解决的方法.我如今应该是第一个出这个问题的解决的方法哦.. ...

  3. java nio-理解同步、异步，阻塞和非阻塞

    理解同步.异步,阻塞和非阻塞 结论:阻塞.非阻塞与是否同步异步无关.     转自知乎 “阻塞”与"非阻塞"与"同步"与“异步"不能简单的从字面理解, ...

  4. vs2008+opencv2.4.9 +win7X64位系统 2.

    小编用自身血淋淋的例子,来给大家做个参考,共耗时近2天时间,终于屈服于安装vs2010,然后配置成功了.但是在这个配置成功后,我终于发现了我08配置不成功的原因,写下心得,供各位参考 1.准备工具 v ...

  5. U9文件与文件系统的压缩和打包

    1.在Linux的环境中,压缩文件的扩展名大多为:*.tar,*.tar.gz,*.tgz,*.bz2. 2.gzip可以说是应用最广的压缩命令了．目前gzip可以揭开compress,zip和gzi ...

  6. 【JAVA学习】“-Xmx1024m -Xms1024m -Xmn512m -Xss256k”——Java执行參数(转)

    年轻代 年老代概念 http://jefferent.iteye.com/blog/1123677 JVM的堆的内存, 是通过以下面两个參数控制的  -Xms 最小堆的大小, 也就是当你的虚拟机启动后 ...

  7. 飘逸的python - __new__、__init__、__call__傻傻分不清

    __new__: 对象的创建,是一个静态方法.第一个參数是cls.(想想也是,不可能是self,对象还没创建,哪来的self) __init__ : 对象的初始化, 是一个实例方法,第一个參数是sel ...

  8. ECSHOP如何增加红包序列号字符

    ECSHOP系统线下发放红包时系统生成的红包序列号是在10000的基础上增加四位随机数字.如果当我们要发放大额度红包的时候,这样的序列号规 则难免给人不安全的感觉,万一有无聊的人,蒙几个红包序列号出来 ...

  9. C语言static 具体分析

    google在最后三页C语言static内容,可找到的资料非常少.无论是长篇大论不知所云的话,在关键位置或跳过,习的人来说參考性不是非常大.所以.我这篇博文博採众家之长,把互联网上的资料整合归类,并亲 ...

  10. 8 shell命令之find

    find命令,像cd一样经常使用.只是可能大多数时间仅仅要那么一两个參数就足够使用了.或者说,勉强够用了.可是当我们主动的去翻看一下find的手冊,会发现原来更实用的功能都没实用到. 本文结合自己的使 ...