1.首先看看JQuery给我们提供的文档
2.那我们如何知道响应json数据的MiME类型该怎么写？
3.后台+前端代码如下
*源代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/jquery-3.3.1.min.js"></script> 7 <script> 8 $(function () { 9 $("#usernameId").blur(function () { 10 $.post({ 11 url: "ajaxRegisterServlet", 12 data: {"username": $("#usernameId").val(), "password": $("#passwordId").val()}, 13 success: function (data) { 14 alert(data); 15 $("#spanId1").text(data.msg); 16 }, 17 }); 18 }); 19 }); 20 </script> 21 </head> 22 <body> 23 <from> 24 用户名：<input type="text" name="username" id="usernameId"> 25 <span id="spanId1"></span> 26 <br/> 27 密码： <input type="password" name="password" id="passwordId"> 28 </from> 29 </body> 30 </html>
1 package com.cht.web.servlet; 2 3 import com.fasterxml.jackson.databind.ObjectMapper; 4 5 import javax.servlet.ServletException; 6 import javax.servlet.annotation.WebServlet; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 import java.io.IOException; 11 import java.util.HashMap; 12 import java.util.Map; 13 14 /** 15 * Created by IntelliJ IDEA. 16 * 17 * @author chenhaitao 18 * Date: 2019/7/8 19 * Time: 13:16 20 */ 21 22 @WebServlet(name = "ajaxRegisterServlet", urlPatterns = "/ajaxRegisterServlet") 23 public class AjaxRegisterServlet extends HttpServlet { 24 @Override 25 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 26 request.setCharacterEncoding("utf-8"); 27 response.setContentType("application/json;charset=utf-8"); 28 String username = request.getParameter("username"); 29 System.out.println(username); 30 Map<String, Object> map = new HashMap<>(); 31 32 if ("cht".equals(username)) { 33 map.put("userExist", true); 34 map.put("msg", "用户名已存在"); 35 } else { 36 map.put("userExist", false); 37 map.put("msg", "用户名可用"); 38 } 39 System.out.println(new ObjectMapper().writeValueAsString(map)); 40 41 new ObjectMapper().writeValue(response.getOutputStream(), map); 42 } 43 }