Ajax入门

一、局部刷新案例

jsp:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3     
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5     
 6 <html>
 7 <head>
 8     
 9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10 <title>AJAX</title>
11 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
12 
13     <script type="text/javascript">
14         $(function(){
15         var btn= $("#btn");
16             btn.click(function(){
17                 alert("点击了按钮！")
18                 $.ajax({
19                     url:'${pageContext.request.contextPath}/test',
20                     type:'post',
21                     datatype:'text',
22                     success:function(data){
23                         alert(data);
24                         data.bofore("<span>"+data+"</span>");
25                     }
26                 });
27             });
28         })
29     </script>
30 </head>
31 <body>
32         ${str}
33         <input id="t1" type="text" value="ggg"><br>
34         <input id="btn" type="button" value="提交">
35 </body>
36 </html>

servlet:

 1 package servlet;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.annotation.WebServlet;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 /**
11  * Servlet implementation class test
12  */
13 @WebServlet("/test")
14 public class test extends HttpServlet {
15     private static final long serialVersionUID = 1L;
16        
17     /**
18      * @see HttpServlet#HttpServlet()
19      */
20     public test() {
21         super();
22         // TODO Auto-generated constructor stub
23     }
24 
25     /**
26      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
27      */
28     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29         // TODO Auto-generated method stub
30     }
31 
32     /**
33      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
34      */
35     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36         // TODO Auto-generated method stub
37         request.setCharacterEncoding("UTF-8");
38         response.setCharacterEncoding("UTF-8");
39         response.setContentType("text/html");
40         String id=(String) request.getAttribute("id");
41         try {
42             Thread.sleep(3000);
43         } catch (InterruptedException e){
44             // TODO 自动生成的 catch 块
45             e.printStackTrace();
46         }
47         String str="HelloWorld!";
48         response.getWriter().write(str);
49 //        request.setAttribute("str", str);
50 //        request.getRequestDispatcher("test.jsp").forward(request,response);
51     }
52 }