2、jQuery的Ajax简单示例

一、创建一个JavaWEBProject

二、创建一个Servlet（下面的例子中用到了Json--第32行，Json的作用是将一个Object类转换为特定格式的字符串，如果不用Json直接返回字符串也行）。

 1 package com.czj.ajax;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.HashMap;
 6 import java.util.Map;
 7 
 8 import javax.servlet.ServletException;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 
13 public class AJAXServlet extends HttpServlet {
14     public void doGet(HttpServletRequest request, HttpServletResponse response)
15             throws ServletException, IOException {
16     }
17 
18     public void doPost(HttpServletRequest request, HttpServletResponse response)
19             throws ServletException, IOException {
20         boolean flag = false;
21         System.out.println(request.getParameter("userName"));
22         if("陈泽俊".equals(request.getParameter("userName"))) 
23             flag = true;//登陆成功标志
24         System.out.println(request.getParameter("password"));
25         response.setContentType("text/html;charset=utf-8");
26         PrintWriter out = response.getWriter();
27         
28         Map<String, Object> map = new HashMap<String, Object>();
29         map.put("userName","陈泽俊");
30         map.put("password", "123456");
31         map.put("flag", flag);//登陆失败
32         out.print(MyJson.objectToJson(map));//返回登录信息
33         out.flush();
34         out.close();
35     }
36 }

　　上面的32行有一个MyJson的类，其代码如下：

　　【注意】用Json的时候要先引入Json所需的基本jar包

 1 package com.czj.ajax;
 2 
 3 
 4 import net.sf.json.JSONArray;
 5 
 6 public class MyJson {
 7       public static String objectToJson(Object resultobj){
 8             if (resultobj != null) {
 9                 JSONArray obj = JSONArray.fromObject(resultobj);  
10                 return (obj.toString());
11             }
12             return "";
13       }                  
14 }

三、写相应的jsp页面

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <script type="text/javascript" src="Jscript/jquery-3.1.1.min.js"></script>
11     <script type="text/javascript">
12             
13        $(document).ready(function(){
14           $("button").click(function(){
15               $.ajax({
16                   type:"post",//提交方式
17                   url:"${pageContext.request.contextPath}/servlet/AJAXServlet.do",
18                   data:{
19                       userName:  $("#userName").val()    ,
20                       password:  $("#password").val()
21                   },              //data中的类容会自动的添加到url后面
22                   dataType: "json", //1、text 2、jsonscript 3、html 4、xml 5、String
23                   success:function(data){      //这个function里面的参数可以随便写
24                        if(data[0].flag == true){
25                           alert("登陆成功！");
26                       }else{
27                           alert("登陆失败！");
28                       } 
29                   }
30               });
31           });
32       }); 
33   </script>
34   </head>
35   
36   <body>
37       <div>
38           <div>
39               <ul>
40                   <li>用户名：</li>
41                   <li><input id="userName" name="userName" type="text" /></li>
42               </ul>
43           </div>
44           <div>
45               <ul>
46                   <li>密码：</li>
47                   <li><input id="password" name="password" type="password"/></li>
48               </ul>
49           </div>
50           <div>
51               <ul>
52                   <li><button>登陆</button></li>
53               </ul>    
54           </div>
55       </div>
56   </body>
57 </html>