jquery+Ajax+Servlet+json

1. 相应的jar包的导入. json-lib-2.2.3-jdk15.jar, ezmorph-1.0.6.jar等.

 

2. 加入jquery.js

 

3. jquery each()方法的使用api.

    http://api.jquery.com/jQuery.each/

 

4. 服务端servlet程序

 

Java代码   收藏代码
  1. import javax.servlet.http.HttpServlet;  
  2. import javax.servlet.http.HttpServletResponse;  
  3. import javax.servlet.http.HttpServletRequest;  
  4. import java.io.IOException;  
  5. import java.io.PrintWriter;  
  6. import javax.servlet.ServletException;  
  7.   
  8. import net.sf.json.JSONArray;  
  9. import net.sf.json.JSONObject;  
  10.   
  11. public class JqueryAjaxServer extends HttpServlet {  
  12.     private static final long serialVersionUID = 1L;  
  13.   
  14.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  15.             throws IOException, ServletException {  
  16.         response.setContentType("text/html;charset=utf-8");  
  17.         String account = request.getParameter("account");  
  18.           
  19.         JSONObject json = new JSONObject();  
  20.           
  21.         JSONArray array = new JSONArray();  
  22.         JSONObject member = null;  
  23.         for (int i = 0; i < 3; i++) {  
  24.             member = new JSONObject();  
  25.             member.put("name""xiaohua"+i);  
  26.             member.put("age"20+i);  
  27.             array.add(member);  
  28.         }  
  29.           
  30.         json.put("account", account);  
  31.         json.put("jsonArray", array);  
  32.           
  33.         PrintWriter pw = response.getWriter();   
  34.         pw.print(json.toString());  
  35.           
  36.         System.out.println("json array :"+array.toString());  
  37.         System.out.println("json object :"+json.toString());  
  38.           
  39.         pw.close();  
  40.     }  
  41.   
  42.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  43.             throws IOException, ServletException {  
  44.         this.doGet(request, response);  
  45.     }  
  46. }  
 

5. jsp页面(jqueryAjax.jsp)

 

 

Html代码   收藏代码
  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.3.1.js" type="text/javascript"></script>  
  12. <script language="javascript">  
  13.     $(function(){  
  14.         $('.sumbit').click(function(){  
  15.             if($('#account').val().length==0){  
  16.                 $('.hint').text("用户名不能位空").css({"background-color":"green"});   
  17.             }else{  
  18.                 $.ajax({  
  19.                     url:'jqueryAjax',  //此处的url名与Servlet类的类名不一致,因为在web.xml中的<url-pattern>有配置操作
  20.                     data:{account:$('#account').val()},  
  21.                     dataType:'json', //很重要!!!.      预期服务器返回的数据类型  
  22.                     error:function(){  
  23.                         alert("error occured!!!");  
  24.                     },  
  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.                 });  
  35.             }  
  36.         });  
  37.     });  
  38. </script>  
  39. </head>  
  40.   
  41. <body>  
  42. <h3 align="center">jquery AjaX</h3>  
  43. <hr>  
  44. <label>请输入你的账户 :</label>  
  45. <input id="account" name="account" type="text">  
  46. <input class="sumbit" type="button" value="检测">  
  47. <div class="hint"></div>  
  48. </body>  
  49. </html>  

 

6. 配置文件web.xml

 

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.     <servlet>  
  8.        <servlet-name>jqueryAjaxServer</servlet-name>  
  9.        <servlet-class>com.june.servlet.JqueryAjaxServer</servlet-class>  
  10.     </servlet>  
  11.         <servlet-mapping>  
  12.        <servlet-name>jqueryAjaxServer</servlet-name>  
  13.        <url-pattern>/jqueryAjax</url-pattern>  //在URL中可以通过访问jqueryAjax来代替jqueryAjaxServer类名
  14.     </servlet-mapping>  
  15.   <welcome-file-list>  
  16.     <welcome-file>index.jsp</welcome-file>  
  17.   </welcome-file-list>  
  18. </web-app>  


本文转载自:http://sunyimaying0925-gmail-com.iteye.com/blog/714328

你可能感兴趣的:(java,jquery,Ajax,json,servlet)