ajax方式检查用户名是否存在

最新推荐文章于 2021-08-05 14:30:35 发布

Erkang september

最新推荐文章于 2021-08-05 14:30:35 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_41006598/article/details/115986265

ajax 专栏收录该内容

1 篇文章

订阅专栏

该博客展示了如何在jsp页面中使用Ajax与Spring MVC控制器进行数据交互。当用户名更改时，Ajax发送请求到服务器检查用户名是否已存在，Spring MVC通过@ResponseBody注解将Java对象直接转化为JSON响应。如果用户名已存在，前端会弹出提示，否则提示用户名可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.jsp页面，springMvc会帮我们把请求的数据匹配到方法参数中，而不用我们自己转换json对象为java对象，返回时会自动把java对象转换为json字符串

<%--
  Created by IntelliJ IDEA.
  User: y
  Date: 2021/4/21
  Time: 23:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#username").change(function () {
                var username = $("#username").val()
                $.ajax({
                    //请求路径
                    url:"${pageContext.request.contextPath}/checkUsername",
                    //请求数据：用户名
                    data:{"username":username},
                    //期望返回的数据格式
                    dataType:"json",
                    //这里的data是请求成功后返回的json数据
                    success:function (data) {
                        if(data==true){
                            alert("用户名已存在，请重新输入")
                            $("#username").focus();
                        }else{
                            alert("用户名可用")
                        }
                    },
                    error:function () {
                        alert("请求出错")
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div>
        <form>
            <table>
                <tr>
                    <td>用户名</td>
                    <td id="nameTd"><input type="text" name="username" id="username" placeholder="username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" name="password" id="password" placeholder="password"></td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="登录">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

2.java代码

    @RequestMapping("/ajaxLoginDemo")
    public String ajaxLoginDemo(){
        return "ajaxLoginDemo";
    }

    @RequestMapping("/checkUsername")
    @ResponseBody   //用于直接返回对象
    public boolean checkUsername(String username){
        if("lek".equals(username)){
            return true;
        }
        return false;
    }