實例解析Java jquery json的執行過程

 

一、相关技术、工具简介

1、简单介绍一下JSON，JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。已键值对形式表示数据，和java中的Map的数据存储形式相似，具体细节请参考http://www.json.org/json-zh.html。

2、对应后台JSON的数据处理工具json-lib，包含各种格式数据的工具类，比如：JavaBean、数组、集合(Collection)等，参考API文档。

3、jQuery框架中的数据表现形式，如果你熟悉jQuery的话就会发现jQuery的使用的数据传输都是JSON格式，比如我们经常使用的$.ajax方法：

Js代码

1. $.ajax({   
2.     url : url,   
3.     data : {   
4.         id : chkValue   
5.     },   
6.     cache : false,   
7.     dataType : "json",   
8.     success : function(result){   
9.         alert(result);   
10.     }   
11. );  

$.ajax({url : url,data : {id : chkValue},cache : false,dataType : "json",success : function(result){alert(result);});

 

其中 {…} 表示的就是JSON格式的数据

二、前台工作方式
为了能够容易理解以系统登录讲解，最后会以一个实例的方式讲解
1、登录页面
代码请参见 http://code.google.com/p/finance-p/source/browse/trunk/login.jsp

Java代码

1. 用户名：   
2. <input id="loginName" name="loginName" size="20" type="text" />   
3.     
4. 密码：   
5. <input id="password" name="password" size="20" type="password" />  

用户名：<input id="loginName" name="loginName" size="20" type="text" /> 密码：<input id="password" name="password" size="20" type="password" />

 

2、登录javascript文件 login.js

Js代码

1. /**  
2.  * 设置表单验证规则  
3.  */  
4. function regFormValidator() {   
5.     $.formValidator.initConfig({formid:"loginForm"});   
6.     $("#loginName").formValidator({   
7.         onshow : "请输入用户名",   
8.         onfocus : "用户名至少2个字,最多4个字"  
9.     }).inputValidator({   
10.         min : 1,   
11.         onerror : "你输入的用户名非法,请确认"  
12.     });   
13.     
14.     $("#password").formValidator({   
15.         onshow : "请输入密码"  
16.     }).inputValidator({   
17.         min : 6,   
18.         onerror : "密码在6位以上，请确认"  
19.     });   
20. }   
21.     
22. $(function() {   
23.     // 注册表单验证插件   
24.     regFormValidator();   
25.     
26.     $('#submit').click(function(){   
27.         // 验证输入的用户名、密码是否正确   
28.         var valid = jQuery.formValidator.pageIsValid('1');   
29.         if (valid) {   
30.             $(this).attr('value', '正在登录……').attr('disabled', true);   
31.         } else {   
32.             return;   
33.         }   
34.     
35.         // 发送请求   
36.         $.ajax({   
37.             url : 'login.do',   
38.             data    : { loginName:$('#loginName').val(), password: $('#password').val() },   
39.             success : function(result){   
40.                 // 根据result返回信息判断是否登录成功   
41.                 if(result &amp;&amp; result == 'success') {   
42.                     window.location.href = 'index.jsp';   
43.                 } else {   
44.                     alert('登录失败，用户名或密码错误，请重试！');   
45.                 }   
46.             }   
47.         });   
48.     
49.     });   
50. });  

/** * 设置表单验证规则 */function regFormValidator() {$.formValidator.initConfig({formid:"loginForm"});$("#loginName").formValidator({onshow : "请输入用户名",onfocus : "用户名至少2个字,最多4个字"}).inputValidator({min : 1,onerror : "你输入的用户名非法,请确认"}); $("#password").formValidator({onshow : "请输入密码"}).inputValidator({min : 6,onerror : "密码在6位以上，请确认"});} $(function() {// 注册表单验证插件regFormValidator(); $('#submit').click(function(){// 验证输入的用户名、密码是否正确var valid = jQuery.formValidator.pageIsValid('1');if (valid) {$(this).attr('value', '正在登录……').attr('disabled', true);} else {return;} // 发送请求$.ajax({url: 'login.do',data: { loginName:$('#loginName').val(), password: $('#password').val() },success : function(result){// 根据result返回信息判断是否登录成功if(result && result == 'success') {window.location.href = 'index.jsp';} else {alert('登录失败，用户名或密码错误，请重试！');}}}); });});

 

这样当点击“登录”按钮的时候触发ajax请求：

1. 验证表单完整性
2. 发送ajax请求到后台，值通过data键已JSON格式传送至后台
3. 如果后台返回的result为success时表示登录成功，页面跳转至首页index.jsp

三、后台工作方式

后台要比前台操作复杂一些，以为涉及到数据库、编码或者一些业务逻辑

1、获得请求参数

有两种方式：

• 通过request.getParameter(”key”)的方式
• 通过json-lib工具包获取

这我们主要讲解怎么通过json-lib获取参数

首先我们来写一个公共的方法，可以返回一个net.sf.json.JSONObject对象，具体代码如下：

Java代码

1. /**  
2.  * 读取请求参数转换JSONObject对象  
3.  *  
4.  * @param request HttpServletRequest 对象  
5.  * @return json格式的String对象  
6.  * @throws Exception  
7.  */  
8. @SuppressWarnings("unchecked")   
9. protected JSONObject readJson(HttpServletRequest request) throws Exception {   
10.     JSONObject jsonObject = new JSONObject();   
11.     try {   
12.         Map parameterMap = request.getParameterMap();   
13.                 // 通过循环遍历的方式获得key和value并set到JSONObject中  
14.         Iterator paIter = parameterMap.keySet().iterator();   
15.         while (paIter.hasNext()) {   
16.             String key = paIter.next().toString();   
17.             String[] values = (String[])parameterMap.get(key);   
18.             jsonObject.accumulate(key, values[0]);   
19.         }   
20.         log.debug("从客户端获得json=" + jsonObject.toString());   
21.     } catch (Exception e) {   
22.         log.error("获取json数据出错，错误信息如下：nt" + e.getMessage());   
23.         e.printStackTrace();   
24.         throw e;   
25.     }   
26.     return jsonObject;   
27. }  

/** * 读取请求参数转换JSONObject对象 * * @param request HttpServletRequest 对象 * @return json格式的String对象 * @throws Exception */@SuppressWarnings("unchecked")protected JSONObject readJson(HttpServletRequest request) throws Exception {JSONObject jsonObject = new JSONObject();try {Map parameterMap = request.getParameterMap();                // 通过循环遍历的方式获得key和value并set到JSONObject中Iterator paIter = parameterMap.keySet().iterator();while (paIter.hasNext()) {String key = paIter.next().toString();String[] values = (String[])parameterMap.get(key);jsonObject.accumulate(key, values[0]);}log.debug("从客户端获得json=" + jsonObject.toString());} catch (Exception e) {log.error("获取json数据出错，错误信息如下：nt" + e.getMessage());e.printStackTrace();throw e;}return jsonObject;}

 

通过这个方法我们可以获得一个JSONObject对象，然后就可以通过key获得对应的value；

2、登录处理Action

Java代码

1. public ActionForward login(ActionMapping mapping, ActionForm actionForm,   
2.              HttpServletRequest request,HttpServletResponse response) throws Exception {   
3.     JSONObject jsonObject = readJson(request);   
4.     String name = jsonObject.getString("loginName");   
5.     String pass = jsonObject.getString("password");   
6.     try {   
7.         int loginFlag = userManager.validLogin(name, pass);   
8.         if (loginFlag == UserManager.LOGIN_SUCCESS) {   
9.             User user = userManager.getUserByNameAndPass(name, pass);   
10.             UserUtil.saveUser2Session(user, request);   
11.             log.info("用户&lt;" + user.getUserName()   
12.                               + ",ip=" + request.getRemoteAddr() + "&gt;登录系统");   
13.             print(response, RESBONSE_SUCCESS);   
14.         } else if (loginFlag == UserManager.LOGIN_FAIL) {   
15.             print(response, RESBONSE_ERROR);   
16.         }   
17.     } catch (Exception e) {   
18.         e.printStackTrace();   
19.     }   
20.     return null;   
21. }  

public ActionForward login(ActionMapping mapping, ActionForm actionForm,             HttpServletRequest request,HttpServletResponse response) throws Exception {JSONObject jsonObject = readJson(request);String name = jsonObject.getString("loginName");String pass = jsonObject.getString("password");try {int loginFlag = userManager.validLogin(name, pass);if (loginFlag == UserManager.LOGIN_SUCCESS) {User user = userManager.getUserByNameAndPass(name, pass);UserUtil.saveUser2Session(user, request);log.info("用户<" + user.getUserName()                              + ",ip=" + request.getRemoteAddr() + ">登录系统");print(response, RESBONSE_SUCCESS);} else if (loginFlag == UserManager.LOGIN_FAIL) {print(response, RESBONSE_ERROR);}} catch (Exception e) {e.printStackTrace();}return null;}

  

解释：

在34行我们通过刚刚准备好的readJson方法获得一个JSONObject对象，接下来通过key获得用户名和密码，接下来就是业务逻辑的验证工作了，通过后我们向前台返回请求结果。
我们还需要一个小方法向前台写结果，如上面44、46行

Java代码

1. protected void print(HttpServletResponse response, String info) throws IOException {   
2.     try {   
3.         response.getWriter().print(info);   
4.     } catch (IOException e) {   
5.         e.printStackTrace();   
6.         throw e;   
7.     }   
8. }  

protected void print(HttpServletResponse response, String info) throws IOException {try {response.getWriter().print(info);} catch (IOException e) {e.printStackTrace();throw e;}}

 

这里有一点要说明，在获得输出流的时候有个小插曲，我在开发的时候使用的tomcat5.5.26版本，
当时的写法为：

Java代码

1. response.getOutputStream().print(info);  

response.getOutputStream().print(info);

 

Java代码

1. 后来源码开源后一个网友使用的tomcat6版本，说系统不能正常运行，后来他查到了原因，因为获得输出流时出了问题，   
2. 改成getWriter就没有问题了，集体也没有搞清除为什么会是这样……  

后来源码开源后一个网友使用的tomcat6版本，说系统不能正常运行，后来他查到了原因，因为获得输出流时出了问题，改成getWriter就没有问题了，集体也没有搞清除为什么会是这样……

 

基于java开发时会使用struts，struts需要返回一个ActionMapping对象，但是在ajax请求不需要返回特定页面，因为根本没有跳转页面的动作，解决办法很简单，直接return null就可以了

输出结果后jQuery的ajax的success方法就接收到了请求结果，然后就可以根据结果处理业务逻辑了O(∩_∩)O~

OK，到此整个请求结束，有不明白的请留言或者到“关于”中联系我

注：本文为原创文章，转载请注明来自 http://www.wsria.cn/archives/300