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

2019-11-20 11:01:09

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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函数式编程的乐趣

下一篇：以JavaScript来实现WordPress中的二级导航菜单的方法