[Javascript][jQuery]jQuery + json 实现的简易Ajax调用
2011-11-23 11:02
741 查看
jQuery + json 实现的简易Ajax调用
Userservlet.java代码
Html代码
UserServlet 记得要导入 工具类 JSONStringObject JSONUtil
jsp 要导入 jquery.js和 json.js
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+json实现的简易Ajax调用实例
- jQuery+json实现的简易Ajax调用实例
- JSP+jquery使用ajax方式调用json的实现方法
- 纯JavaScript实现简易版的jQuery选择器,支持链式调用
- php+jquery+ajax+json实现跨域调用 php pdo操作oracle数据库
- Jquery调用Ajax实现联动使用json
- 黑马程序员_学习日记73_725ASP.NET(禁用Cookie、ASP.NET中的重要对象、JavaScript实现AJAX、两种Json格式的序列化方法、JQuery中实现ajax的五种方法)
- JSP+jquery使用ajax方式调用json的实现方法
- 后台ajax调用中字符串到jquery中的json对象和数组对象转换问题
- 基于jQuery的AJAX和JSON实现纯html数据模板
- 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法
- jQuery&nbsp;AJAX实现调用页面后台方法
- jquery的ajax调用json数据
- Struts+Jquery+json实现的ajax案例
- 基于Jquery+Ajax+Json实现分页显示
- jquery返回json类型数据集合简单实现ajax返回多个数据
- jquery中ajax调用json数据的使用说明
- 基于jQuery的AJAX和JSON实现纯html数据模板