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. <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. $("#password").formValidator({
  14. onshow : "请输入密码"
  15. }).inputValidator({
  16. min : 6,
  17. onerror : "密码在6位以上，请确认"
  18. });
  19. }
  20. $(function() {
  21. // 注册表单验证插件
  22. regFormValidator();
  23. $(‘#submit‘).click(function(){
  24. // 验证输入的用户名、密码是否正确
  25. var valid = jQuery.formValidator.pageIsValid(‘1‘);
  26. if (valid) {
  27. $(this).attr(‘value‘, ‘正在登录……‘).attr(‘disabled‘, true);
  28. } else {
  29. return;
  30. }
  31. // 发送请求
  32. $.ajax({
  33. url : ‘login.do‘,
  34. data    : { loginName:$(‘#loginName‘).val(), password: $(‘#password‘).val() },
  35. success : function(result){
  36. // 根据result返回信息判断是否登录成功
  37. if(result &amp;&amp; result == ‘success‘) {
  38. window.location.href = ‘index.jsp‘;
  39. } else {
  40. alert(‘登录失败，用户名或密码错误，请重试！‘);
  41. }
  42. }
  43. });
  44. });
  45. });

这样当点击“登录”按钮的时候触发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~

时间： 2024-07-31 04:43:40

jQuery ajax 流程全解析的相关文章

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

jquery ajax获取和解析数据

最近项目中用到了ajax技术,之前虽然写过一点点,但是没有系统的总结过.趁着刚刚用过,手热就记录一下,方便以后查阅. $.ajax中的参数 $.ajax的函数格式: $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); type:要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏

jQuery&amp;nbsp;Ajax&amp;nbsp;实例&amp;nbsp;全解析

文章链接:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url

jQuery Ajax 全解析

jQuery Ajax 全解析 本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [d

jQuery Ajax全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url(String) : 请求的HTML页的URL地

jQuery Ajax 全解析(转)

<!-- .ajax div{ border: solid 1px red; } --> 转至:QLeelulu jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data

Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析

(默认: 自动判断 (xml 或 html)) 请求失败时调用时间.参数有以下三个:XMLHttpRequest 对象.错误信息.(可选)捕获的错误对象.如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout" , "error" , "notmodified" 和 "parsererror" . error事件返回的第一个参数XMLHttpRequest有一些有用的信息: XMLHttpR

解析JQuery Ajax

jQuery是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址.