zoukankan      html  css  js  c++  java

  • jQuery ajax 流程全解析

    实例解析java + jQuery + json工作过程(登录)

    本文主要讲解在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. );  

    其中 {…} 表示的就是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" />  

    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. });  

    这样当点击“登录”按钮的时候触发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对象，然后就可以通过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. }  

      

    解释：

    在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. }  

    /**
    * 输出字符流
    * 
    * @param reps
    * 输出的参数对象
    * @param str
    * 输出的内容
    */
    public static void outPutStream(HttpServletResponse reps, String str) throws IOException
    {
    // getResponse().setCharacterEncoding("UTF-8");
    // getResponse().setContentType("text/html;charset=UTF-8");
    reps.getOutputStream().write(str.toString().getBytes("UTF-8"));
    }

    outPutStream(response, "{"code":"-12","msg":"用户无效，请重新登录！"}");

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

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

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

    输出结果后jQuery的ajax的success方法就接收到了请求结果，然后就可以根据结果处理业务逻辑了O(∩_∩)O~
  • 相关阅读:
    Free HTML5 Bootrap Admin Template
    js框架简明
    ELKF(Elasticsearch+Logstash+ Kibana+ Filebeat) 部署
    docker-构建 oracle12c-r2(12.2.0.1) 的镜像
    线上故障排查——drools规则引擎使用不当导致oom
    抓住业务核心，避免过度抽象
    Disruptor的应用示例——大文件拆分
    Disruptor3.0的实现细节
    Disruptor——一种可替代有界队列完成并发线程间数据交换的高性能解决方案
    大文件拆分方案的java实践（附源码）
  • 原文地址：https://www.cnblogs.com/svennee/p/4073003.html
Copyright © 2011-2022 走看看