jQuery+json实现的简易Ajax调用实例
本文实例讲述了jQuery+json实现的简易Ajax调用。分享给大家供大家参考，具体如下：
Userservlet.java代码：
packagecom.iss.servlet;
importorg.json.JSONException;
importorg.json.JSONObject;
importcom.iss.pojo.User;
importcom.iss.util.JSONUtil;
publicclassUserServletextendsHttpServlet{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doPost(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
//list添加对象
List<User>userList=newArrayList<User>();
Useruser1=newUser("张三","男","18");
Useruser2=newUser("李四","男","19");
Useruser3=newUser("王五","男","20");
userList.add(user1);
userList.add(user2);
userList.add(user3);
PrintWriterout=response.getWriter();
Stringstr=null;
try{
//帐号密码如果匹配则把list返回给界面
if(request.getParameter("userName").equals("jquery")
&&request.getParameter("password").equals("ajax")){
str=JSONObject.quote(JSONUtil.toJSONString(userList));
}
out.print(str);
}catch(JSONExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
System.out.println("str"+str);
out.flush();
out.close();
}
}
Html代码：
<body>
帐号jquery密码ajax
<formid="mainform">
<ul>
<li>
帐号
<inputtype="text"name="userName"/>
</li>
<li>
密码
<inputtype="password"name="password"/>
</li>
<li>
<inputonclick="login()"type="button"value="登录"/>
</li>
</ul>
</form>
查询到的数据
<divid="diva">
</div>
<scripttype="text/javascript">
functionlogin(){
//获取form的参数
varargs=$("#mainform").serialize();
//调用jquery的json获取方法
//三个参数分别为：请求路径，请求参数，返回数据的回调函数
$.getJSON("servlet/UserServlet",args,function(data){
if(data!=null){
//界面返回的是一个json格式字符串调用JSON.parse()把数据转化为json
//格式的对象
varjsondata=JSON.parse(data);
parseData(jsondata);
}else{
alert("帐号密码输入有误");
}
})
}
functionparseData(data){
varstr="";
//遍历json格式数据
for(varkeyindata){
strstr=str+"用户"+data[key].userName+"年龄"+data[key].age+"<br/>"
alert(str);
}
//把数据添加到div中
$("#diva").html(str);
}
</script>
</body>
UserServlet记得要导入工具类JSONStringObjectJSONUtil
jsp要导入jquery.js和json.js
希望本文所述对大家jQuery程序设计有所帮助。