新建一个SecondTest.html页面,定义一个按钮,并给这个按钮绑定事件ajaxJson()。在JS中实现AJAX,这里的AJAX相对于上一篇中的,我做了简单的封装,将原有的代码分成三个方法,分别是create()、callback()、run()。
create方法是用来创建XMLHttp对象的,callback是用来实现回调函数的,run方法是核心方法。具体代码如下:
create():
function create(){ if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") } }
callback():
function callback(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //要实现的操作 }else{ alert("AJAX服务器返回错误!"); } } }
run():
function run(url){ create(); xmlHttp.open("POST",url,true); xmlHttp.onreadystatechange=callback; xmlHttp.send(); }
以上三个方法写好后,在ajaxJson()方法中直接调用run方法并将请求当参数传入进去。代码如下:
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,再返回给前台。代码如下:
public ActionForward jsonTest(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { //制造假数据 ArrayList<UserModel> list=new ArrayList<UserModel>(); 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代码如下:
//回调函数 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中的实现。
相关推荐
PHP与AJAX返回json数据调用.zip
保存的数据有换行,处理ajax返回json数据时无法处理出现的错误;
很多人在实现struts使用ajax返回json数据的时候,明明代码没有错误但是没有得到结果,其实有可能是jar包冲突或者少了,这里我分享ssh的所有jar包,可以直接部署使用,如果部署有问题的可以看下我的说明文档,本来想...
ajax解析json型的数据,2中方法,有列子,也有注释,很详细。新手可以学习一下。主要就是功能代码。
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
ajax里response返回的数据是一个二维数组,比如这样的[{key,val},{key,val},{key,val}],这个就是传说中的json数据了,以这样的形式数据传到前台,实现菜单联动下拉框;具体怎么样,详情请仔细查看以下内容
Ajax请求接口,Django框架下从该接口接收Ajax发送的json数据,同时将新的json数据返回给Ajax,Ajax收到后在js进行处理,然后和页面内容交互。整个数据前后端交互全部采用json格式。代码高度封装,只需要更改json内容...
如何使用AJAX返回JSON数据,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了,示例如下,感兴趣的朋友可以参考下
demo里面,简单的界面请求action,返回json数据。需要的同学可以看下。
[MVC]bootstrap-table表格ajax获取json数据并分页。
最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来进行说明。
JavaWeb通过ajax、json实现省市二级联动:客户端通过jsp页面,来访问服务器的servlet,服务器访问数据库,返回json数据给客户端
js ajax发起post请求,发送json数据。平台接收并返回json数据,html显示返回结果
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。
首先,Ajax请求数据,(用的是Jquery的Ajax) 代码如下: [removed] $(function(){ $(‘#test’).click(function(){ $.ajax({ url:’__APP__/Article/jsonTest’, type:’post’, success:function(data){ var item;...
介绍struts、ajax如何返回json数据 一首先引入Struts和json所需的jar包。 二编写页面 三编写action类 四Struts配置
ajax struts 无刷新访问后台返回json数据,返回list、map,java类对象等json数据,前台js解析json数据,内有jar包,代码类。是一个完整的项目实例。
使用jquery的方式通过ajax处理json格式的数据,几种实现方法都有,可直接运行
本资源主要配置整合SSM,在前端使用bootstrap实现布局和ajax请求数据,后台通过SpringMVC返回json数据,有教程,有demo,可供新手参考
Struts2+ajax+json返回list,并处理json返回为[object,object]的方法,Struts2配置