本文實(shí)例講述了jQuery+json實(shí)現(xiàn)的簡易Ajax調(diào)用。分享給大家供大家參考，具體如下：
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> 查詢到的數(shù)據(jù) <div id="diva"> </div> <script type="text/javascript"> function login(){ //獲取form的參數(shù) var args =$("#mainform").serialize(); //調(diào)用 jquery 的json獲取方法 //三個(gè)參數(shù)分別為 ：請求路徑 ，請求參數(shù)，返回?cái)?shù)據(jù)的回調(diào)函數(shù) $.getJSON("servlet/UserServlet",args,function (data){ if(data!=null){ // 界面返回的是一個(gè)json格式字符串 調(diào)用JSON.parse()把數(shù)據(jù)轉(zhuǎn)化為json // 格式的對象 var jsondata =JSON.parse(data); parseData(jsondata); }else{ alert("帳號密碼輸入有誤"); } }) } function parseData(data){ var str=""; //遍歷json格式數(shù)據(jù) for (var key in data){ strstr =str+" 用戶"+data[key].userName+" 年齡"+data[key].age+"<br/>" alert(str); } //把數(shù)據(jù)添加到div中 $("#diva").html(str); } </script></body>UserServlet 記得要導(dǎo)入 工具類 JSONStringObject JSONUtil
jsp 要導(dǎo)入 jquery.js和 json.js
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
