本文主要讲解在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方法:
$.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
用户名:
<input id="loginName" name="loginName" size="20" type="text" />
密码:
<input id="password" name="password" size="20" type="password" />
2、登录javascript文件 login.js
/**
* 设置表单验证规则
*/
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请求:
- 验证表单完整性
- 发送ajax请求到后台,值通过data键已JSON格式传送至后台
- 如果后台返回的result为success时表示登录成功,页面跳转至首页index.jsp
三、后台工作方式
后台要比前台操作复杂一些,以为涉及到数据库、编码或者一些业务逻辑
1、获得请求参数
有两种方式:
- 通过request.getParameter(”key”)的方式
- 通过json-lib工具包获取
这我们主要讲解怎么通过json-lib获取参数
首先我们来写一个公共的方法,可以返回一个net.sf.json.JSONObject对象,具体代码如下:
/**
* 读取请求参数转换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
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行
protected void print(HttpServletResponse response, String info) throws IOException {
try {
response.getWriter().print(info);
} catch (IOException e) {
e.printStackTrace();
throw e;
}
}
这里有一点要说明,在获得输出流的时候有个小插曲,我在开发的时候使用的tomcat5.5.26版本,
当时的写法为:
response.getOutputStream().print(info);
后来源码开源后一个网友使用的tomcat6版本,说系统不能正常运行,后来他查到了原因,因为获得输出流时出了问题,
改成getWriter就没有问题了,集体也没有搞清除为什么会是这样……
基于java开发时会使用struts,struts需要返回一个ActionMapping对象,但是在ajax请求不需要返回特定页面,因为根本没有跳转页面的动作,解决办法很简单,直接return null就可以了
输出结果后jQuery的ajax的success方法就接收到了请求结果,然后就可以根据结果处理业务逻辑了O(∩_∩)O~
OK,到此整个请求结束,有不明白的请留言或者到“关于”中联系我
注:本文为原创文章,转载请注明来自 http://www.wsria.cn/archives/300
分享到:
相关推荐
### 实例解析java+jQuery+json工作过程 #### 背景与概述 在现代Web开发中,前后端分离已成为一种普遍的技术趋势。在这种模式下,前端负责展示数据及交互逻辑,而后端则专注于处理业务逻辑及数据管理。Java、jQuery...
【标题】: "实例解析java + jQuery + json工作过程(登录)" 【描述】: 本文将详细解析在Java环境下,结合jQuery库和JSON数据格式完成登录功能的工作流程。 【标签】: ajax, Java, jQuery, json, json-lib, 教程 ...
这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...
这个“java+ajax+json+jquery完整实例”提供了一个实际的应用场景,展示了如何将这些技术有效地结合在一起。下面,我们将详细讨论这些技术以及在这个实例中的应用。 1. **Java**:Java是一种广泛使用的面向对象的...
结合“java+json+jquery经典实例”这个标题和描述,我们可以推断这个压缩包可能包含了一些使用Java后端处理数据,通过JSON格式进行传输,并利用jQuery在前端展示和操作数据的简单示例项目。例如,它可能有一个简单的...
通过这个"Java+ajax写的登录实例",我们可以了解到Java后端和Ajax前端如何协同工作,以提供流畅的用户体验。同时,这也是一个很好的实践案例,帮助初学者理解Web开发中的前后端交互和数据通信机制。
Struts、jQuery、Ajax以及JSON是Web开发中的四个关键技术,它们在构建动态、交互式的Web应用程序中发挥着重要作用。下面将分别介绍这些技术的核心概念及其在实际应用中的结合使用。 **Struts框架**:Struts是Apache...
通过Ajax实现页面局部更新,通过JSON传递和解析数据,通过Java处理业务逻辑和数据交互,从而提供流畅且高效的用户体验。在实际应用中,开发者需要理解这些技术的工作原理,并熟练运用它们来构建交互式的Web应用。
在这个实例中,Flexigrid与Struts2、JSON和jQuery进行了集成,构建了一个功能丰富的Web应用。 Struts2是Apache软件基金会的一个开源MVC框架,用于构建Java Web应用程序。它提供了强大的动作调度、拦截器机制以及...
标题 "struts2+spring+hibernate+jquery+dwr+json" 描述了一个集成的Web应用程序开发框架,其中包含了多个关键技术和库。这个框架旨在提高开发效率,提供灵活的数据管理,以及用户友好的前端交互。 1. Struts2:...
在"Struts2+JQuery+Json实例"中,我们探讨的是如何结合这三个技术来创建动态、响应式的Web应用。以下是这个实例中的关键知识点: 1. **获取JS值**:在JQuery中,我们可以使用`val()`函数来获取表单元素的值,如...
结合实例,"struts2+jQuery+json 实例"很可能是创建了一个Web应用,用户在前端通过jQuery发送AJAX请求,这些请求可能包含表单数据或者对页面的某些操作。后端Struts2框架接收到请求后,会调用相应的Action执行业务...
在项目中,`Struts2JQueryJson`文件夹可能包含了HTML页面、JavaScript脚本、Struts2相关的Action类、以及可能的 strut2 配置文件等资源。 总结来说,这个实例通过结合Struts2的后端控制、jQuery的前端交互和JSON的...
标题中的"SSI+JSON+jQuery案例"表明这是一个关于服务器端包含(SSI)、JavaScript对象表示法(JSON)以及jQuery JavaScript库的实际应用示例。这个项目可能是为了演示如何在Web开发中结合这三个技术,以提高效率和...
在"JSON+js+jquery+ajax基础.zip"这个压缩包中,可能包含的教程或示例将涵盖以下几个方面: 1. JSON基础知识:介绍JSON的语法结构,如对象和数组的表示,以及如何在JavaScript中创建和解析JSON对象。 2. JavaScript...
6. 从JSON解析Java对象:同样,你可以反向操作,从JSON字符串创建Java对象。这通常涉及创建一个Java类,然后使用`org.json`库的`fromJson()`方法: ```java public class Person { public String name; public ...
JQuery可以方便地解析这个Json响应,更新页面元素。 至于"Test3List"这个文件,可能是测试用例或者表示三级联动中每一级的数据列表。这可能是JSON格式的数据文件,包含了不同级别的分类信息,供Ajax请求获取和展示...
【标题】:“jQuery + AJAX + JSON + Servlet 实例源码” 这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求,与后台Servlet进行数据交互,并通过JSON格式来序列化和反序列化数据。这些技术是...
这个经典实例展示了jQuery、AJAX、Java和JSON在Web开发中的协同工作,通过这种方式,前端和后端可以高效地交换数据,实现动态更新页面而无需刷新整个页面,提升了用户体验。学习并熟练掌握这些技术对于成为一名优秀...
标题 "S2SH+jQuery+JSON+Ajax注册--异步校验" 提及的技术栈主要包含四个关键部分:Struts2 (S2),Spring,Hibernate(SSH)这三大企业级开发框架,以及jQuery、JSON和Ajax这三者组成的前端交互技术。这篇博客文章...