java环境下使用jQuery进行JSON数据传送的交互过程
例解析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 {