getJSON方式请求服务器

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://"
 5             + request.getServerName() + ":" + request.getServerPort()
 6             + path + "/";
 7 %>
 8 
 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11 <head>
12 <base href="<%=basePath%>">
13 <title>My JSP 'register.jsp' starting page</title>
14 <script type="text/javascript" src="<%=basePath%>js/jquery-1.12.4.js"></script>
15 <script type="text/javascript">
16     $(document).ready(
17             function() {
18 
19                 $("#loginName").blur(
20                         function() {
21                             var name = this.value;
22                             alert(name);
23                             if (name == "") {
24                                 $("#check").text("用户名不能为空");
25                             } else {//使用ajax发送异步请求，判断用户名是否存在
26                                 $.getJSON(
27                                         "http://localhost:8080/ajaxstu1/check",
28                                         "name="+name, callBack);
29                             }
30                                 function callBack(checkTag) {
31                                     if (checkTag == true) {
32                                         $("#check").text("用户名已使用");
33                                     } else if (checkTag ==false) {
34                                         $("#check").text("用户名可以使用");
35                                     }
36                                 }
37 
38                         }//end blur function
39                     
40                 );
41             });
42 </script>
43 
44 </head>
45 <!--
46         /*     $.ajax({
47                     "url" : "check",
48                     "type" : "get",
49                     "data" : "name=" + name,
50                     "dataType" : "text",
51                     "success" : callBack,
52                     "error" : function() {
53                         alert("系统正在更新，稍后再试");
54                     }
55                 }); */
56   -->
57 <body>
58     <form action="">
59         <table>
60             <tr>
61                 <td>昵称：</td>
62                 <td><input type="text" id="loginName" name="name" />
63                 </td>
64                 <td><span id="check"></span>
65                 </td>
66             </tr>
67         </table>
68     </form>
69 
70 </body>
71 </html>

注意：使用 $.getJSON( "http://localhost:8080/ajaxstu1/check", "name="+name, callBack); 去请求服务器时，服务器返回的是json对象，在callBack回调函数中做

checkTag == true 判断时，就不能使用checkTag =="true"的方式了，否则，结果出不来！！！

CheckUserServlet.java

 1 package cn.bdqn.xsh.controller;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 import com.alibaba.fastjson.JSON;
12 
13 public class CheckUserServlet extends HttpServlet{
14 
15     private static final long serialVersionUID = 8418279663598505788L;
16 
17     @Override
18     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
19             throws ServletException, IOException {
20         
21 //        resp.setCharacterEncoding("UTF-8");
22         String name = req.getParameter("name");
23         System.out.println(name);
24         boolean tag = true;
25         if(name.equals("liuch")){
26             tag=true;
27         }else{
28             tag=false;
29         }
30         PrintWriter out = resp.getWriter();
31 
32 //        使用$.getJSON方式进行异步请求
33         String returnStr=JSON.toJSONString(tag); //把tag转成JSON格式
34         System.out.println("returnStr is:"+returnStr);
35         out.print(returnStr);
36         out.flush();
37         out.close();
38         
39     }
40 
41     @Override
42     protected void doPost(HttpServletRequest req, HttpServletResponse resp)
43             throws ServletException, IOException {
44         req.setCharacterEncoding("UTF-8");//
45         this.doGet(req, resp);
46     }
47     
48 }

web.xml配置

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="3.0" 
 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_3_0.xsd">
 7   <display-name></display-name>    
 8   <welcome-file-list>
 9     <welcome-file>index.jsp</welcome-file>
10   </welcome-file-list>
11     
12     <servlet>
13       <servlet-name>CheckUserServlet</servlet-name>
14       <servlet-class>cn.bdqn.xsh.controller.CheckUserServlet</servlet-class>
15   </servlet>
16   <servlet-mapping>
17       <servlet-name>CheckUserServlet</servlet-name>
18       <url-pattern>/check</url-pattern>
19   </servlet-mapping>
20   
21  
22 </web-app>

使用$.get()方式请求服务器和使用$.getJSON()方式请求服务器，返回值的类型不同，前者是一个字符串，后者不是，看下图浏览器调试界面的区别：

$.get()方式请求服务器：

使用$.getJSON()方式请求服务器：

此外，可以在callBack回调函数中加一句：console.log(typeof checkTag ); 就能知道服务器返回的值的类型了

　　　　　　　　　　　　　　　　　　function callBack(checkTag) {
　　　　　　　　　　　　　　　　　　　　　　console.log(typeof result);
31                                     if (checkTag == true) {
32                                         $("#check").text("用户名已使用");
33                                     } else if (checkTag ==false) {
34                                         $("#check").text("用户名可以使用");
35                                     }
36                                 }