例解析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方法:
$.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、获得请求参数
有两种方式:
1.通过request.getParameter(“key”)的方式
2.通过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,到此整个请求结束,有不明白的请留言或者到“关于”中联系我
分享到:
相关推荐
本实例将详细介绍如何利用jQuery与Java通过JSON进行数据交互,帮助开发者理解并掌握这一重要技能。 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在jQuery中,AJAX...
总结来说,这个“json.rar”压缩包提供了Java环境下处理JSON数据所需的各种工具,特别适合于使用jQuery进行AJAX开发的场景。开发者可以通过这些库轻松地在服务器端和客户端之间传递和处理JSON数据,实现高效且流畅的...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...
总结起来,这个【项目组管理系统】结合了Java的稳定性和强大的功能,利用JSON进行数据交换,借助jQuery简化前端开发,并通过Ajax提供流畅的用户体验。对于想要学习Web应用开发的人来说,这是一个很好的实践案例,...
### Jquery解析json #### 知识点概览 1. **JSON介绍** ...综上所述,通过结合使用jQuery和Struts2框架,可以实现在前后端之间高效地传递和处理JSON数据,极大地提升了Web应用程序的功能性和用户体验。
总的来说,Java提供了后台处理能力,JQuery简化了前端交互,而JSON作为数据交换格式,使得前后端之间的通信变得更加简单。掌握这三者之间的协同工作,将极大地提升你的Web开发技能。在实际操作中,可以参考提供的...
"jQuery+json异步实现JSP和struts2之间的数据传递"是一个典型的应用场景,它结合了前端JavaScript库jQuery与后端MVC框架Struts2,通过JSON这种轻量级的数据交换格式进行高效的数据交互。下面我们将详细探讨这一主题...
在这个过程中,jQuery负责发起请求和处理响应,而Struts2在后端处理请求并返回JSON数据。当用户界面触发某个事件(比如点击按钮),jQuery会发起Ajax请求,Struts2 Action执行相关逻辑并生成JSON响应,最后jQuery将...
这样一个例子展示了如何利用SSH处理后台业务逻辑,使用JQuery进行前端交互,并通过JSON进行数据交换,形成一个完整的Web应用程序流程。理解并熟练掌握这些技术对于Java Web开发者来说至关重要。
【标题】: "实例解析...前端使用jQuery进行用户交互和数据提交,后端使用Java处理业务逻辑和数据验证,而JSON作为数据载体在两者之间传递信息。这种模式在现代Web应用中非常常见,有助于构建高效、响应式的交互体验。
### 实例解析java+jQuery+json工作过程 #### 背景与概述 在现代Web开发中,前后端分离已成为一种普遍的技术趋势。在这种模式下,前端负责展示数据及交互逻辑,而后端则专注于处理业务逻辑及数据管理。Java、jQuery...
3. **数据验证**:在前端使用jQuery进行表单验证时,可以利用JSON数据定义验证规则。这使得验证逻辑可复用且易于维护。 4. **响应式设计**:在移动设备上,通过Ajax请求加载JSON数据,可以实现页面内容的按需加载,...
本教程将详细讲解如何利用jQuery和JSON实现AJAX功能,以创建一个自动下拉框效果,具体到在Eclipse开发环境下进行实践。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等复杂任务。...
总的来说,这个主题涵盖了前端与后端交互的基础知识,包括使用jQuery进行Ajax请求,servlet处理请求并返回JSON,以及JSON作为数据交换格式的角色。在现代Web应用中,这样的交互模式非常常见,对于理解和掌握Web开发...
服务器端使用Java处理这些数据,与数据库进行交互,完成数据操作。完成后,服务器返回处理结果,通常也是JSON格式,供前端解析并更新UI。这种模式提高了应用程序的响应速度,因为数据交换是在后台异步进行的,用户...
本篇将深入探讨基于Jquery的Ajax如何与Java后台进行交互,以及在交互过程中如何模拟网络延迟并展示加载图片。 首先,Ajax的核心功能是实现页面的局部刷新,它允许我们在不重新加载整个网页的情况下,从服务器获取...
总结起来,将jQuery的AJAX与Struts2结合,可以通过JSON对象数组进行前后端的数据交互。在前端,利用`$.ajax()`发送JSON数据;在后端,Struts2 Action接收并处理这些数据。这种通信方式在现代Web应用中非常常见,因为...
在IT行业中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛应用于...理解这些基本概念和技巧,开发者能够高效地在JQuery前端和Java后端之间传递和处理JSON数据,实现动态、数据驱动的Web应用。
服务器返回的是JSON格式的数据,前端使用jQuery解析并动态插入到DOM中,从而实现页面内容的更新。 四、jQuery实现无刷新分页步骤 1. **HTML结构**:首先,我们需要在页面上设置分页导航和内容区域。分页导航通常...
### jQuery $.post() 方法详解与 JSON 数据交互 在现代 Web 开发中,客户端与服务器端的数据交换是非常重要的一个环节。jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端...