ajax+json校驗使用者名稱是否存在

阿新 • • 發佈：2021-01-18

技術標籤：Servlet

需求：實現使用者名稱校驗，如下圖所示，當用戶名在資料庫中存在就提示註冊過了，請換一個，沒有的話，提示使用者名稱可用
在這裡插入圖片描述

register.html程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js" 
></script>
<script>

    //給username繫結blur事件
    $(function () {
        $("#username").blur(function () {
            //獲得輸入的值
            var username = $(this).val();
            //非同步獲取伺服器中的值
            //這中間傳的資料是json資料{"userExsit":true}
            //不要忘記在客戶端使用時，要想當做json資料格式使用 

            $.post("findUserservlet",{username:username},function (data) {
                if (data.userExsit){
                    //顯示註冊過了，顯示紅色
                    $("#S_username").css("color","red");
                    $("#S_username").html("註冊過了,請換一個" 
);
                }
                else{
                    //顯示綠色，
                    $("#S_username").css("color","green");
                    $("#S_username").html("使用者名稱可用");
                }
            },"json")
        })
    })


</script>
<body>

<form>

    <input type="text" id="username" name="username" placeholder="請輸入使用者名稱">
    <span id="S_username"></span>
    <br>
    <input type="text" id="password" name="password" placeholder="請輸入密碼"> <br>
    <input type="submit" value="註冊">



</form>


</body>
</html>

findUserServlet.java程式碼如下：

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/findUserservlet")
public class findUserservlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //設定編碼
        resp.setContentType("text/html;charset=utf-8");
        //獲得引數
        String username = req.getParameter("username");
        //建立map封裝物件
        Map<String,Object> map=new HashMap<String,Object>();

        if(username.equals("tom")){
            map.put("userExsit",true);
        }
        else {
            map.put("userExsit",false);
        }
        //將map轉換成json物件,傳給客戶端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(resp.getWriter(),map);

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }
}