ajax java返回json_快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)

实例二:Ajax返回Json在Java中的实现

在上一个随笔中,介绍AJAX的一个简单实例,在这篇中主要是说一下使用Json来将后台取得的数据显示到前台页面。可以说这种方法应该是实现无刷新分页的基础,而且在开发过程中经常被用到。这里的后台部分由JAVA来实现。

这个例子也在上一篇中那个项目中实现。新建一个SecondTest.html页面,定义一个按钮,并给这个按钮绑定事件ajaxJson()。在JS中实现AJAX,这里的AJAX相对于上一篇中的,我做了简单的封装,将原有的代码分成三个方法,分别是create()、callback()、run()。

create方法是用来创建XMLHttp对象的,callback是用来实现回调函数的,run方法是核心方法。具体代码如下:

create():

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.pngView Code

function create(){

if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}else if(window.ActiveXObject){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

}

callback():

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.pngView Code

function callback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//要实现的操作 }else{

alert("AJAX服务器返回错误!");

}

}

}

run():

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.pngView Code

function run(url){

create();

xmlHttp.open("POST",url,true);

xmlHttp.onreadystatechange=callback;

xmlHttp.send();

}

以上三个方法写好后,在ajaxJson()方法中直接调用run方法并将请求当参数传入进去。代码如下:

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.pngView Code

function ajaxJson(){

run("test.do?method=jsonTest&&msg="+new Date());

}

在AjaxController类的中新建jsonTest方法,在JAVA中实现Json是需要Json架包的,Json的架包有:json-lib-2.3-jdk15.jar,ezmorph-1[1].0.6.jar,commons-logging-tests.jar,commons-logging-api-1.1.1.jar,commons-logging-adapters-1.1.1.jar,commons-logging-1.1.1-sources.jar,commons-logging-1.1.1-javadoc.jar,commons-logging-1.1.1.jar,commons-lang.jar,commons-collections-3[1].2.1.jar,commons-beanutils-core.jar,commons-beanutils-bean-collections.jar,commons-beanutils.jar。看着有点多哈,可以自己去CSDN上面找,我试着删掉一些,但发现少了会不好使,所以为了保险还是把这些都加进去吧。

在开发过程中一般数据都是从数据库中取出来的,习惯性的我们会在程序中将取出的数据存到List中,而Json架包中正好有封装好的方法能将List转换为Json。在这个例子中我们自己制造一些假数据放到List中,然后再将List转换为Json,再返回给前台。代码如下:

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.pngView Code

public ActionForward jsonTest(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

//制造假数据 ArrayList list=new ArrayList();

UserModel user1=new UserModel();//用户对象1 user1.setUserId(1);

user1.setUserName("哈哈");

user1.setUserSex("男");

list.add(user1);

UserModel user2=new UserModel();//用户对象2 user2.setUserId(2);

user2.setUserName("呵呵");

user2.setUserSex("女");

list.add(user2);

//将List转化为JSON JSONArray json=JSONArray.fromObject(list);

//设置编码 response.setCharacterEncoding("gbk");

//写入到前台 response.getWriter().write(json.toString());

return null;

}

后台部分写完了,现在前台SecondTest.html页面需要接收后台反馈来的数据,这个时候就需要在回调函数中接收Json数据。JS代码如下:

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.pngView Code

//回调函数 function callback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

var xmlDoc=xmlHttp.responseText;

var data=eval(xmlDoc);

alert(data[0].userId+","+data[0].userName+","+data[0].userSex);

alert(data[1].userId+","+data[1].userName+","+data[1].userSex);

}else{

alert("AJAX服务器返回错误!");

}

}

}

以上就完成了Ajax返回Json在Java中的实现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值