引入JSON的jar包:
注意，如果包不全，页面请求servlet时，jquery ajax会返回error：function
弹出error occured!!!
HTML Code:
1 <%@ page language="java" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <title>jquery ajax</title> 6 <meta http-equiv="pragma" content="no-cache"> 7 <meta http-equiv="cache-control" content="no-cache"> 8 <meta http-equiv="expires" content="0"> 9 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 10 <meta http-equiv="description" content="This is my page"> 11 <script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script> 12 <script language="javascript"> 13 $(function(){ 14 $('.sumbit').click(function(){ 15 var v = $('#account').val(); 16 alert(v); 17 if($('#account').val().length==0){ 18 $('.hint').text("用户名不能位空").css({"background-color":"green"}); 19 }else{ 20 $.ajax({ 21 type:'get', 22 url:'jqueryAjax', 23 data:{account:$('#account').val()}, 24 dataType:'json', //很重要!!!.预期服务器返回的数据类型 , 25 success:function(data){ 26 $.each(data.jsonArray,function(index){ 27 $.each(data.jsonArray[index],function(key,value){ 28 alert(key+":"+value) 29 }); 30 }); 31 32 $('body').append("<div>"+data.account+"</div>").css("color","red"); 33 }, 34 error:function(){ 35 alert("error occured!!!"); 36 } 37 38 }); 39 } 40 }); 41 }); 42 </script> 43 </head> 44 45 <body> 46 <h3 align="center">jquery AjaX</h3> 47 <hr> 48 <label>请输入你的账户 ：</label> 49 <input id="account" name="account" type="text"> 50 <input class="sumbit" type="button" value="检测"> 51 <div class="hint"></div> 52 </body> 53 </html>
dataType:'json', //很重要!!!.预期服务器返回的数据类型 ,这句代码注释掉,也正常运行!
不知是否是servlet中写了这句代码的原因:
response.setContentType("application/x-json");(网上找下原因)
servlet Code：JqueryAjaxServlet.java
1 import java.io.IOException; 2 import java.io.PrintWriter; 3 4 import javax.servlet.ServletException; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 import net.sf.json.JSONArray; 10 import net.sf.json.JSONObject; 11 12 /** 13 * Author: YangT 14 * Version: 1.0 15 * Create: 2013-3-13 上午10:34:58 16 */ 17 public class JqueryAjaxServlet extends HttpServlet { 18 19 public void doGet(HttpServletRequest request, HttpServletResponse response) 20 throws ServletException, IOException { 21 System.out.println("JqueryAjaxServlet : begin"); 22 23 // response.setContentType("text/html;charset=utf-8"); 24 String account = request.getParameter("account"); 25 System.out.println("account :" + account); 26 27 JSONObject json = new JSONObject(); 28 JSONArray jsonArray = new JSONArray(); 29 30 JSONObject member = null; 31 for (int i = 1; i < 3; i++) { 32 member = new JSONObject(); 33 member.put("name", "yangting" + i); 34 member.put("age", 22 + i); 35 jsonArray.add(member); 36 } 37 json.put("jsonArray", jsonArray); 38 json.put("account", account); 39 40 //错误：response.setContentType("text/html;charset=utf-8"); 41 response.setContentType("application/x-json"); 42 PrintWriter pw = response.getWriter(); 43 pw.print(json.toString()); 44 45 System.out.println("json array :" + jsonArray.toString()); 46 System.out.println("json object :" + json.toString()); 47 System.out.println("JqueryAjaxServlet : end"); 48 49 pw.close(); 50 51 } 52 53 public void doPost(HttpServletRequest request, HttpServletResponse response) 54 throws IOException, ServletException { 55 this.doGet(request, response); 56 } 57 58 }
web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> 3 4 <servlet> 5 <servlet-name>JqueryAjaxServlet</servlet-name> 6 <servlet-class>JqueryAjaxServlet</servlet-class> 7 </servlet> 8 <servlet-mapping> 9 <servlet-name>JqueryAjaxServlet</servlet-name> 10 <url-pattern>/jqueryAjax</url-pattern> 11 </servlet-mapping> 12 13 </web-app>