JavaWeb22.4【Ajax&Json：註冊案例-校驗使用者名稱是否已存在】
阿新 • • 發佈：2021-07-08
客戶端
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用者註冊</title> 6 <script src="js/jquery-3.3.1.min.js"></script> 7 <script> 8 $(function () { 9 //給username輸入框繫結失去焦點事件 10 $("#username").blur(function () { 11 //獲取username文字輸入框的值 12 var username = $(this).val(); 13 //傳送ajax非同步請求 14 $.get( 15 "findUserServlet", 16 {username:username}, 17 function (data) {18 /* alert(data); 19 //未設定"json"時：{"userExsit":"false","msg":"?????"} 20 //設定"json"後：[object Object]*/ 21 22 /* 23 期望伺服器響應回的資料格式： 24 {"userExsit":true,"msg":"此使用者名稱太受歡迎,請更換一個"}25 {"userExsit":false,"msg":"使用者名稱可用"} 26 */ 27 28 var span = $("#s_username"); 29 //判斷userExsit 30 if (data.userExsit){ 31 //使用者名稱存在 32 span.css("color", "red"); 33 span.html(data.msg); 34 } else { 35 //使用者名稱不存在 36 span.css("color", "green"); 37 span.html(data.msg); 38 } 39 }, 40 "json" //指定接收的型別為json，不然預設為text字串 41 ); 42 }); 43 }); 44 </script> 45 </head> 46 <body> 47 <form> 48 <input type="text" name="username" placeholder="請輸入使用者名稱" id="username"> 49 <span id="s_username"></span><br> 50 <input type="password" name="password" placeholder="請輸入密碼"><br> 51 <input type="submit" value="註冊"> 52 </form> 53 </body> 54 </html>
伺服器端
1 package com.haifei.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 @WebServlet("/findUserServlet") 15 public class FindUserServlet extends HttpServlet { 16 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 17 //從頁面獲取使用者輸入的使用者名稱 18 String username = request.getParameter("username"); 19 // System.out.println(username); 20 21 //設定響應的資料格式為json，防止msg中的中文亂碼 22 response.setContentType("application/json;charset=utf-8"); 23 24 //實際應呼叫service層判斷使用者名稱是否存在；此處簡化一下只作為演示 25 Map<String, Object> map = new HashMap<>(); 26 if ("tom".equals(username)){ 27 //已存在 28 map.put("userExsit", "true"); 29 map.put("msg", "此使用者名稱太受歡迎,請更換一個"); 30 }else { 31 //不存在 32 map.put("userExsit", "false"); 33 map.put("msg", "使用者名稱可用"); 34 } 35 36 //將map轉為json，並傳遞到客戶端（瀏覽器頁面） 37 ObjectMapper mapper = new ObjectMapper(); 38 mapper.writeValue(response.getWriter(), map); 39 } 40 41 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 42 this.doPost(request, response); 43 } 44 }
效果