Ajax简单实现注册用户名校验

最新推荐文章于 2024-04-29 10:55:48 发布

行行·失故路

最新推荐文章于 2024-04-29 10:55:48 发布

阅读量3.3k

点赞数 6

文章标签： ajax

本文链接：https://blog.csdn.net/m0_62931396/article/details/123321770

版权

1. 概念

2. JQuery实现方式

3. 案例：注册校验用户名是否存在

1. 概念

同步和异步的区别

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

        Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
       通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
       传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

作用：提升用户的体验

2. JQuery实现方式

        1. $.ajax()
           语法：$.ajax({键值对});
           //使用$.ajax()发送异步请求
   $.ajax({
   url:"ajaxServlet1111" , // 请求路径
   type:"POST" , //请求方式
   //data: "username=jack&age=23",//请求参数
   data:{"username":"jack","age":23},
   success:function (data) {
   alert(data);
   },//响应成功后的回调函数
   error:function () {
   alert("出错啦...")
   },//表示如果请求响应出现错误，会执行的回调函数

   dataType:"text"//设置接受到的响应数据的格式
   });

        2. $.get()：发送get请求
           语法：$.get(url, [data], [callback], [type])
               参数：
                   url：请求路径
                   data：请求参数
                   callback：回调函数
                   type：响应结果的类型

        3. $.post()：发送post请求
           语法：$.post(url, [data], [callback], [type])
               参数：
                   url：请求路径
                   data：请求参数
                   callback：回调函数
                   type：响应结果的类型

3. 案例：注册校验用户名是否存在

注册页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#username").blur(function () {
                var username = $(this).val();
                $.get("findUserServlet",{username:username},function (data) {

                    var span = $("#s_username");
                    if(data.userExsit){
                        //用户名存在
                        span.css("color","red");
                        span.html(data.msg);
                    }else {
                        //用户名不存在
                        span.css("color","green");
                        span.html(data.msg);
                    }
                },"json");
            });
        });


    </script>
</head>
<body>
    <form>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

Servlet后台：
FindUserServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        response.setContentType("application/json;charset=utf-8");//设置响应格式为json
        Map<String,Object> map = new HashMap<String,Object>();
        //简单校验，tom作为校验字段
        if("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","用户名存在了");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);

实现效果：

行行·失故路

关注

6
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
Ajax简单实现注册用户名校验

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。作用：提升用户的体验
复制链接

扫一扫