准备:
1、 prototype.js
2、 jquery1.3.2.min.js
3、 json2.js
后台处理程序(servlet),访问路径servlet/testajax:
java代码
package ajax.servlet; import java.io.ioexception; import java.io.printwriter; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; /** * ajax例子后台处理程序 * @author bing * @version 2011-07-07 * */ public class testajaxservlet extends httpservlet { public void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { response.setcontenttype(text/html;charset=utf-8); printwriter out = response.getwriter(); string name = request.getparameter(name); string age = request.getparameter(age); system.out.println({\name\:\ + name + \,\age\:\ + age + \}); out.print({\name\:\ + name + \,\age\: + age + }); out.flush(); out.close(); } public void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { doget(request,response); } }
testajaxservlet接收两个参数：name和age，并返回一个以json格式编写的字符串。
前台页面参数输入界面:
html代码
<p id="show">显示区域</p> <p id="parameters"> name:<input id="name" name="name" type="text" /><br /> age:<input id="age" name="age" type="text" /><br /> </p>
一、prototype实现
html代码
<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function prototypeajax() { var url = servlet/testajax;//请求url var params = form.serialize(parameters);//提交的表单 var myajax = new ajax.request( url,{ method:post,// 请求方式 parameters:params, // 参数 oncomplete:pressresponse, // 响应函数 asynchronous:true }); $(show).innerhtml = 正在处理中...; } function pressresponse(request) { var obj = request.responsetext; // 以文本方式接收 $(show).innerhtml = obj; var objjson = request.responsetext.evaljson(); // 将接收的文本用解析成json格式 $(show).innerhtml += name= + objjson['name'] + age= + objjson['age']; } </script> <input id="submit" type="button" value="提交" onclick="prototypeajax()" /><br />
在prototype的ajax实现中，用evaljson方法将字符串转换成json对象。
二、jquery实现
html代码
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="json2.js"></script> <input id="submit" type="button" value="提交" /><br /> <script type="text/javascript"> function jqueryajax() { var user={name:,age:}; user.name= $(#name).val(); user.age=$(#age).val(); var time = new date(); $.ajax({ url: servlet/testajax?time=+time, data: name=+user.name+&age=+user.age, datatype: json,//请求页面返回的数据类型 type: get, contenttype: application/json,//注意请求页面的contenttype 要于此处保持一致 success:function(data) {//这里的data是由请求页面返回的数据 var datajson = json.parse(data); // 使用json2.js中的parse方法将data转换成json格式 $(#show).html(data= + data + name=+datajson.name+ age= + datajson.age); }, error: function(xmlhttprequest, textstatus, errorthrown) { $(#show).html(error); } }); } $(#submit).bind(click,jqueryajax); // 绑定提交按钮 </script>
刚接触jquery,在json的处理上借助了json2.js。还请前辈们指教。。
三、xmlhttprequest实现
html代码
<script type="text/javascript"> var xmlhttp; function xmlhttprequestajax() { // 获取数据 var name = document.getelementbyid(name).value; var age = document.getelementbyid(age).value; // 获取xmlhttprequest对象 if(window.xmlhttprequest){ xmlhttp = new xmlhttprequest(); }else if(window.activexobject){ var activxname = [msxml2.xmlhttp,microsoft.xmlhttp]; for(var i = 0 ; i parse error
name没有用引号引起来，使用json.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery做出垂直半透明手风琴效果
jquery实现导航菜单鼠标提示功能
以上就是ajax三种实现方法与ajax解析json的详细内容。