Jquery的ajax简单测试

 1 Jsp部分：
 2 
 3 <!--  导入jquery的js外部文件   -->
 4 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 5 <script>
 6     $(function() {
 7         //定义全局变量，这里只有一个label，所有用标签选择器
 8         var lab = $("label");
 9         lab.css("color", "red");
10         lab.css("font-size", "12px");
11         
12         //点击任何一个input标签的button都将执行，本测试只有一个
13         $(":button").click(function() {
14             //获取指定id的第一个元素内容
15             var name = $("#userName").val();
16             //执行ajax
17             $.ajax({
18                 //传输类型，这里使用Post
19                 type: "Post",
20                 //传输地址，这里是间接路径，测试路径在同目录下
21                 url: "search",
22                 //传输数据,也可以通过问号传值, 比如  url："search?name="+name
23                 data: {name: name},
24                 //成功执行时
25                 success:function(mess) {
26                     //消息反馈为 "yes"
27                     if(mess=="yes") {
28                         //label标签赋值
29                         lab.text("该用户名已存在！");
30                     }else {
31                         lab.text("用户名可以使用！");
32                     }
33                 }
34             })
35         })
36         
37     })
38 </script>
39 
40 </head>
41 <body>
42 
43     <input type="text" id="userName" /><label></label><br/><br/>
44     <input type="button" id="accept" value="验证用户名"/>
45     
46 </body>

 1 Servlet部分：
 2 
 3 @WebServlet("/search")
 4 public class searchServlet extends HttpServlet {
 5     private static final long serialVersionUID = 1L;
 6 
 7     //get请求方式也传递给post处理
 8     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 9         doPost(request, response);
10     }
11 
12     protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
13         //避免出现编码紊乱，统一使用utf-8
14         request.setCharacterEncoding("utf-8");
15         response.setContentType("text/html; charset=utf-8");
16         //获取从跳转页面得到的内容
17         String name = request.getParameter("name");
18         PrintWriter out = response.getWriter();
19         
20         //这里假设验证 silly 为已存在, 若需要测试实际数据，则可通过jdbc操作从数据库中查找
21         if(name.equals("silly")) {
22             //给Ajax反馈信息
23             out.print("yes");
24         }else {
25             out.print("no");
26         }
27     }
28 }

Jquery的ajax简单测试

猜你喜欢