JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 1
密级： 版本： v1.0
文档作者：刘浪：liulang@mochasoft.com.cn 提交时间： 2010-08-24
JSON+JQueryJSON+JQueryJSON+JQueryJSON+JQuery 实现实现实现实现
页面动态加载与表单内容异步提交页面动态加载与表单内容异步提交页面动态加载与表单内容异步提交页面动态加载与表单内容异步提交
1 概述...............................................................................................................................................................2
2 详述...............................................................................................................................................................2
2.1 依赖的 jar包和 js库文件（以下均为测试的环境，框架与 jar包的版本均可以调整）.......... 2
2.1.1 该功能用于 J2EE项目（web项目）中，框架用的是 Spring+Struts+Ibatis。...............2
2.1.2 JSON依赖的 jar包如下：.................................................................................................. 2
2.1.3 Jquery_AJAX依赖的 js如下：.......................................................................................... 2
2.2 JSON格式化数据（主要是方便 js操纵数据）............................................................................3
2.2.1 JSON可以格式化的数据：................................................................................................ 3
2.2.2 普通的 JavaBean格式化为 JSONObject：.....................................................................3
2.2.3 Map格式化为 JSONObject：............................................................................................. 5
2.2.4 List格式化为 JSONArray：................................................................................................6
2.2.5 将 JSON数据传递给页面，代码如下：............................................................................6
2.3 页面通过 Jquery_AJAX获取数据.................................................................................................. 7
2.3.1 Jquery_AJAX（使用前必须在页面引入 Jquery jquery-1.3.1.js）：.................... 7
2.3.2 获取 JSONObject格式的数据：.........................................................................................8
2.3.3 当数据量比较大的时候要用 post方法，此时如果要传递给 action参数就必须要在 url
后面添加，如果要用如 2中这样方便的操纵数据 dataType就要指定为 json。........................... 9
2.4 通过 jquery_ajaxSubmit异步提交表单数据...................................................................................9
2.4.1 jquery_ajaxSubmit（使用前必须在页面引入 Jquery jquery.form.js）：............... 9
3
分析
定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析
.............................................................................................................................................................10
4
总结
初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf
.............................................................................................................................................................10
5 附录.............................................................................................................................................................10
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 2
1111 概述
本文主要是描述使用 JSON+JQuery_AJAX实现页面动态加载与页面表单数据的异步保存。首先页面通
过调用 JQuery_AJAX方法访问后台 Action，在后台 Action中将获取到的 JavaBean、List、Map等数据
类型转换为 json-lib.jar中的 JSONObject和 JSONArray类型，将格式化后的数据传给页面由 js来处理。
然后页面通过调用 jquery_ajaxSubmit方法将页面表单中的数据传递给后台 Action处理。
2222 详述
2.12.12.12.1 依赖的 jarjarjarjar包和 jsjsjsjs库文件（以下均为测试的环境，框架与 jarjarjarjar包的
版本均可以调整）
2.1.12.1.12.1.12.1.1....该 功 能 用 于 J2EEJ2EEJ2EEJ2EE 项 目 （ webwebwebweb 项 目 ） 中 ， 框 架 用 的 是
Spring+Struts+IbatisSpring+Struts+IbatisSpring+Struts+IbatisSpring+Struts+Ibatis。
2.1.22.1.22.1.22.1.2....JSONJSONJSONJSON依赖的 jarjarjarjar包如下：
commons-httpclient-3.1.jar
commons-lang-2.4.jar
commons-logging-1.1.1.jar
json-lib-2.2.3-jdk13.jar
ezmorph-1.0.6.jar
commons-collections-3.2.1.jar
2.1.32.1.32.1.32.1.3....Jquery_AJAXJquery_AJAXJquery_AJAXJquery_AJAX依赖的 jsjsjsjs如下：
jquery-1.3.1.js
jquery.form.js
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 3
2.22.22.22.2 JSONJSONJSONJSON格式化数据（主要是方便 jsjsjsjs操纵数据）
2.2.12.2.12.2.12.2.1....JSONJSONJSONJSON可以格式化的数据：
JJJJavaavaavaava中的数据类型 JSONJSONJSONJSON类型
普通的 JavaBean（有些特殊处理的不能被格式化，具体原因在研究 ing） JSONObject
Map JSONObject
List JSONArray
常用的主要就以上三中类型
2.2.22.2.22.2.22.2.2....普通的 JavaBeanJavaBeanJavaBeanJavaBean格式化为 JSONObjectJSONObjectJSONObjectJSONObject：
1、建 2个简单的 javaBean（TextBean.java，TextBean1.java）具体代码如下：
importimportimportimport java.util.Date;
publicpublicpublicpublic classclassclassclass TextBean {
privateprivateprivateprivate String propertys1;
privateprivateprivateprivate String propertys2;
privateprivateprivateprivate Date propertys3;
privateprivateprivateprivate TextBean1 tb1;
publicpublicpublicpublic TextBean1 getTb1() {
returnreturnreturnreturn tb1;
}
publicpublicpublicpublic voidvoidvoidvoid setTb1(TextBean1 tb1) {
thisthisthisthis.tb1 = tb1;
}
publicpublicpublicpublic Date getPropertys3() {
returnreturnreturnreturn propertys3;
}
publicpublicpublicpublic voidvoidvoidvoid setPropertys3(Date propertys3) {
thisthisthisthis.propertys3 = propertys3;
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 4
}
publicpublicpublicpublic finalfinalfinalfinal String getPropertys1() {
returnreturnreturnreturn propertys1;
}
publicpublicpublicpublic finalfinalfinalfinal voidvoidvoidvoid setPropertys1(String propertys1) {
thisthisthisthis.propertys1 = propertys1;
}
publicpublicpublicpublic String getPropertys2() {
returnreturnreturnreturn propertys2;
}
publicpublicpublicpublic finalfinalfinalfinal voidvoidvoidvoid setPropertys2(String propertys2) {
thisthisthisthis.propertys2 = propertys2;
}
}
publicpublicpublicpublic classclassclassclass TextBean1 {
privateprivateprivateprivate String p1;
privateprivateprivateprivate String p2;
publicpublicpublicpublic String getP1() {
returnreturnreturnreturn p1;
}
publicpublicpublicpublic voidvoidvoidvoid setP1(String p1) {
thisthisthisthis.p1 = p1;
}
publicpublicpublicpublic String getP2() {
returnreturnreturnreturn p2;
}
publicpublicpublicpublic voidvoidvoidvoid setP2(String p2) {
thisthisthisthis.p2 = p2;
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 5
}
}
2、在 Action中格式化 TextBean，具体代码如下：
TextBean tb = newnewnewnew TextBean();
TextBean1 tb1 = newnewnewnew TextBean1();
tb1.setP1("tb11111");
tb1.setP2("tb2222222222");
tb.setTb1(tb1);
tb.setPropertys1("abcdef");
tb.setPropertys2("123456");
tb.setPropertys3(newnewnewnew Date());
JSONObject jsonObj = JSONObject.fromObject(tb);
2.2.32.2.32.2.32.2.3....MapMapMapMap格式化为 JSONObjectJSONObjectJSONObjectJSONObject：
TextBean tb = newnewnewnew TextBean();
TextBean1 tb1 = newnewnewnew TextBean1();
tb1.setP1("tb11111");
tb1.setP2("tb2222222222");
tb.setTb1(tb1);
tb.setPropertys1("abcdef");
tb.setPropertys2("123456");
tb.setPropertys3(newnewnewnew Date());
Map map = newnewnewnew HashMap();
map.put("textBean", tb);
map.put("type", "map");
JSONObject jsonObj = JSONObject.fromObject(map);
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 6
2.2.42.2.42.2.42.2.4....ListListListList格式化为 JSONArrayJSONArrayJSONArrayJSONArray：
TextBean tb = newnewnewnew TextBean();
TextBean1 tb1 = newnewnewnew TextBean1();
tb1.setP1("tb11111");
tb1.setP2("tb2222222222");
tb.setTb1(tb1);
tb.setPropertys1("abcdef");
tb.setPropertys2("123456");
tb.setPropertys3(newnewnewnew Date());
Map map = newnewnewnew HashMap();
map.put("type", "map");
List list = newnewnewnew ArrayList();
list.add(tb);
list.add(map);
JSONArray jsonArray = JSONArray.fromObject(list);
2.2.52.2.52.2.52.2.5....将 JSONJSONJSONJSON数据传递给页面，代码如下：
publicpublicpublicpublic voidvoidvoidvoid writeToResponse(HttpServletResponse response, JSONObject
jsonObj) {
PrintWriter out = nullnullnullnull;
response.setContentType("text/html;charset=utf-8");
trytrytrytry {
out = response.getWriter();
out.print(jsonObj);
out.flush();
} catchcatchcatchcatch (IOException e) {
e.printStackTrace();
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 7
} finallyfinallyfinallyfinally {
out.close();
}
}
publicpublicpublicpublic voidvoidvoidvoid writeToResponse(HttpServletResponse response, JSONArray
jsonArr) {
PrintWriter out = nullnullnullnull;
response.setContentType("text/html;charset=utf-8");
trytrytrytry {
out = response.getWriter();
out.print(jsonArr);
out.flush();
} catchcatchcatchcatch (IOException e) {
e.printStackTrace();
} finallyfinallyfinallyfinally {
out.close();
}
}
2.32.32.32.3 页面通过 Jquery_AJAXJquery_AJAXJquery_AJAXJquery_AJAX获取数据
2.3.12.3.12.3.12.3.1....Jquery_AJAXJquery_AJAXJquery_AJAXJquery_AJAX（使用前必须在页面引入 JqueryJqueryJqueryJquery jquery-1.3.1.jsjquery-1.3.1.jsjquery-1.3.1.jsjquery-1.3.1.js）：
functionfunctionfunctionfunction getTextData() {
$.ajax({
url:
'/perform/jsp/perform/manager/editForm/pmpmy/PmpmyDataBGVAction.do?me
thod=getTextData',
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 8
data: '',
type: 'post',
dataType: 'json',
contentType: 'application/json;charset=utf-8',
cache: falsefalsefalsefalse,
success: functionfunctionfunctionfunction(data) {
alert(data.propertys3.year);
},
error: functionfunctionfunctionfunction(xhr) {
alert(xhr);
}
});
}
url：ajax方法需要访问的后台 action的处理方法，可以在后面跟参数。
data：传给后台处理 action 方法的参数。格式为{'key1':'value1', 'key2':'value2'}或
"key1=value1&key2=value2"。（只有当 type参数为 get时 data传的参数才起左右）
type：post/get
dataType：json（表明传递给后台的数据类型，以及后台传递来的数据类型）
success: functionfunctionfunctionfunction(data) { } 访问成功后执行的方面，其中参数data为后台action返回的数
据。
2.3.22.3.22.3.22.3.2....获取 JSONObjectJSONObjectJSONObjectJSONObject格式的数据：
1) 获取javaBean数据（如TextBean: data.propertys2/data.tb1.p1等）
2) 获取Map数据（如上面Map： data.type/data.textBean.protertys2/ data.textBean.tb1.p1等）
3) 获取List数据（如上面List： data[0]. propertys2/data[0] .tb1.p1/data[1].type等）
4) 获取List的长度：data.length(data为js中的Array)
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 9
2.3.32.3.32.3.32.3.3....当数据量比较大的时候要用 postpostpostpost方法，此时如果要传递给 actionactionactionaction参数
就必须要在ururururllll后面添加，如果要用如2222中这样方便的操纵数据dataTypdataTypdataTypdataTypeeee
就要指定为 jsonjsonjsonjson。
2.42.42.42.4 通过 jquery_ajaxSubmitjquery_ajaxSubmitjquery_ajaxSubmitjquery_ajaxSubmit异步提交表单数据
2.4.12.4.12.4.12.4.1.... jquery_ajaxSubmitjquery_ajaxSubmitjquery_ajaxSubmitjquery_ajaxSubmit（使用前必须在页面引入 JqueryJqueryJqueryJquery jquery.form.jsjquery.form.jsjquery.form.jsjquery.form.js）：
functionfunctionfunctionfunction o_save(){ //用于保存 表单内容
varvarvarvar succFalg=falsefalsefalsefalse;
ifififif(!checkForm()) {
returnreturnreturnreturn falsefalsefalsefalse;
}
$("#form1").ajaxSubmit({
async: falsefalsefalsefalse ,
success: functionfunctionfunctionfunction(data) { succFalg=truetruetruetrue;},
url: '/perform/jsp/DRWPmpmyearDate.do?method=saveDate'
});
ifififif(!succFalg){
alert('存储数据出现异常！');
}
returnreturnreturnreturn succFalg;
}
$("#form1").ajaxSubmit({
async: falsefalsefalsefalse ,
success: functionfunctionfunctionfunction(data) {},
url: ''
}) 用于异步提交表单 form1中的数据到 url指定的 action方法。
JSON+JQuery_AJAX 实现页面动态加载
河南移动绩效管理项目一期 摩卡软件 http://www.mochasoft.com.cn
Mocha Software Co.,Ltd. 客户 质量 团结 创新 10
3333 分析
可以将这这些功能做成一个易用的框架，在下正在努力 working。
4444 总结
5555 附录
♥特别感谢我的老爸、老妈、老婆♥
概述
详述
依赖的jar包和js库文件（以下均为测试的环境，框架与jar包的版本均可以调整）
该功能用于J2EE项目（web项目）中，框架用的是Spring+Struts+Ibatis。
JSON依赖的jar包如下：
Jquery_AJAX依赖的js如下：
JSON格式化数据（主要是方便js操纵数据）
JSON可以格式化的数据：
普通的JavaBean格式化为JSONObject：
Map格式化为JSONObject：
List格式化为JSONArray：
将JSON数据传递给页面，代码如下：
页面通过Jquery_AJAX获取数据
Jquery_AJAX（使用前必须在页面引入Jqueryjquery-1.3.1.js）：
获取JSONObject格式的数据：
当数据量比较大的时候要用post方法，此时如果要传递给action参数就必须要在url后面添加，如果
通过jquery_ajaxSubmit异步提交表单数据
jquery_ajaxSubmit（使用前必须在页面引入Jqueryjquery.form.js）
分析
总结
附录
浙公网安备 33021202002483