jQuery+json做出Ajax调用功能(附代码)
程序员文章站
2022-04-19 18:09:23
...
这次给大家带来jQuery+json做出Ajax调用功能(附代码),jQuery+json做出Ajax调用功能的注意事项有哪些,下面就是实战案例,一起来看一下。
python读写json文件案列详解(附代码)
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> 查询到的数据 <p id="pa"> </p> <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); } //把数据添加到p中 $("#pa").html(str); } </script> </body>
UserServlet 记得要导入 工具类 JSONStringObject JSONUtil
jsp 要导入 jquery.js和 json.js
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
python读写json文件案列详解(附代码)
以上就是jQuery+json做出Ajax调用功能(附代码)的详细内容,更多请关注其它相关文章!
上一篇: Windows7下如何在命令行使用MySQL_MySQL
下一篇: HTML中增强标记的用法总结