首页 > 开发 > AJAX > 正文

jQuery+json实现的简易Ajax调用实例

2024-09-01 08:33:38
字体:
来源:转载
供稿:网友
这篇文章主要介绍了jQuery+json实现的简易Ajax调用,结合实例形式分析了jQuery基于ajax实现json传参调用的技巧,需要的朋友可以参考下
 

本文实例讲述了jQuery+json实现的简易Ajax调用。分享给大家供大家参考,具体如下:

Userservlet.java代码:

package com.iss.servlet;import org.json.JSONException;import org.json.JSONObject;import com.iss.pojo.User;import com.iss.util.JSONUtil;public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  response.setContentType("text/html;charset=utf-8");  //list 添加对象  List<User> userList = new ArrayList<User>();  User user1 = new User("张三", "男", "18");  User user2 = new User("李四", "男", "19");  User user3 = new User("王五", "男", "20");  userList.add(user1);  userList.add(user2);  userList.add(user3);  PrintWriter out = response.getWriter();  String str = null;  try {   //帐号密码如果匹配则把list 返回给界面   if (request.getParameter("userName").equals("jquery")     && request.getParameter("password").equals("ajax")) {    str = JSONObject.quote(JSONUtil.toJSONString(userList));   }   out.print(str);  } catch (JSONException e) {   // TODO Auto-generated catch block   e.printStackTrace();  }  System.out.println("str "+str);  out.flush();  out.close(); }}

Html代码:

<body> 帐号 jquery 密码 ajax <form id="mainform">  <ul>   <li>    帐号    <input type="text" name="userName" />   </li>   <li>    密码    <input type="password" name="password" />   </li>   <li>    <input onclick="login()" type="button" value="登录" />   </li>  </ul> </form> 查询到的数据 <div id="diva"> </div> <script type="text/javascript">   function login(){   //获取form的参数   var args =$("#mainform").serialize();   //调用 jquery 的json获取方法   //三个参数分别为 :请求路径 ,请求参数,返回数据的回调函数   $.getJSON("servlet/UserServlet",args,function (data){   if(data!=null){   // 界面返回的是一个json格式字符串 调用JSON.parse()把数据转化为json   // 格式的对象   var jsondata =JSON.parse(data);   parseData(jsondata);   }else{   alert("帐号密码输入有误");   }   })   }   function parseData(data){   var str="";   //遍历json格式数据   for (var key in data){   strstr =str+" 用户"+data[key].userName+" 年龄"+data[key].age+"<br/>"   alert(str);   }   //把数据添加到div中   $("#diva").html(str);   }  </script></body>

UserServlet 记得要导入 工具类 JSONStringObject JSONUtil

jsp 要导入 jquery.js和 json.js

希望本文所述对大家jQuery程序设计有所帮助。



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表