servlet+jquery+ajax+json 例子

来源:互联网 发布:遇见app 连接不了网络 编辑:程序博客网 时间:2024/05/11 20:38
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 03i++) {   
  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',   
  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>  
  14.     </servlet-mapping>  
  15.   <welcome-file-list>  
  16.     <welcome-file>index.jsp</welcome-file>  
  17.   </welcome-file-list>  
  18. </web-app>  
原创粉丝点击