jquery_ajax实现登陆用户名验证唯一性

最新推荐文章于 2023-02-15 16:10:54 发布

今天,我和你拼了

最新推荐文章于 2023-02-15 16:10:54 发布

阅读量965

点赞数

分类专栏： JSP

本文链接：https://blog.csdn.net/weixin_38255444/article/details/100998296

版权

JSP 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

后端Servlet代码


package com.ityouxin.web;

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("/userServlet")
public class LoginAjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        resp.setCharacterEncoding("utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        String name = req.getParameter("name");
        System.out.println(name);
        Map map = new HashMap();
        if (name.equals("zhangsan")){
            map.put("number",1);
            objectMapper.writeValue(resp.getWriter(),map);
        }else {
            map.put("number",0);
            objectMapper.writeValue(resp.getWriter(),map);
        }

    }
}

## 前端html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆验证</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <SCRIPT>
        $(function () {
                $("#name").blur(function () {
                    if ($("#name").val()=="" || $("#password").val()=="" ) {
                        alert("用户名或者密码不能为空");
                    }else {
                        $.ajax({
                            url: "userServlet",
                            type: "GET",
                            data: {"name": $("#name").val()},
                            dataType: "json",
                            success: function (data) {
                                if (data.number == 1) {
                                    $("#msg").html("该用户名太抢手啦!请重新输入")
                                    $("#msg").css("color", "red")
                                } else if (data.number == 0) {
                                    $("#msg").html("可以使用?")
                                    $("#msg").css("color", "green")
                                }
                            }
                        })
                    }
                })
            })
    </SCRIPT>
</head>
<body>
<form>
    <input type="text" name="name" id="name"><br>
    <input type="password" name="password" id="password"><br>
    <input type="submit" name="submit" id="sub">
    <span id="msg"></span>
</form>

</body>
</html>

今天,我和你拼了

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jquery_ajax实现登陆用户名验证唯一性

后端Servlet代码package com.ityouxin.web;import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.htt...
复制链接

扫一扫