原生ajax与jQuery ajax来异步验证

最新推荐文章于 2024-07-12 20:03:50 发布

zxh.dream

最新推荐文章于 2024-07-12 20:03:50 发布

阅读量126

点赞数

文章标签： ajax js post java

本文链接：https://blog.csdn.net/SKTDream/article/details/111058194

版权

用原生ajax异步验证注册时用户名是否存在

下面是ajax.html文件代码
用post请求，当输入框失去焦点时进行异步验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function ajax(a) {
            //验证账户是否已存在
            var div=a;
            var xmlhttp = null;
            //1.创建ajax对象
            if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.准备数据创建发送请求(设置请求参数)
            //xmlhttp.open("get","ajax?username=test",true);
            xmlhttp.open("post", "ajax", true);//中间的参数为请求服务器的地址
            //3.发送请求
             //xmlhttp.send();//get请求发送
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send(div.name+"="+div.value);//post请求添加数据

            //4.为ajax对象添加状态事件
            xmlhttp.onreadystatechange = function () {//回调方法
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //成功后执行的js
//xmlhttp.responseText为服务器返回的数据，自己可以设置返回任意数据
//这里我用返回的0和1代表用户名是否存在
                    //5.获取服务器响应的数据
                    if(xmlhttp.responseText==0){
                        document.getElementById(div.id+"Span").innerHTML="可以注册";
                        document.getElementById(div.id+"Span").style.color="green";
                    }else if(xmlhttp.responseText==1){
                        document.getElementById(div.id+"Span").innerHTML="用户名已存在";
                        document.getElementById(div.id+"Span").style.color="red";
                    }
                    else {
                        document.getElementById(div.id+"Span").innerHTML="注册失败";
                        document.getElementById(div.id+"Span").style.color="red";
                    }
                }

            }
        }
    </script>
</head>
<body>
<form action="register" method="post"><br>
    账号：   <input type="text" name="username" id="username" onblur="ajax(this)"><span id="usernameSpan"></span><br>
    密码：   <input type="text" name="password"><br>
    姓名：   <input type="text" name="name"><br>
    电话：   <input type="text" name="phone"><br>
    身份证号：<input type="text" name="idCard"><br>
    <input type="submit" value="注册">&nbsp;&nbsp;
    


</form>


</body>
</html>

下面为jQuery ajax模式的html代码
需要导入相应的js包才能使用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript">
    <!--  jQuery包的路径  --></script>
    <script>
        $(function () {
            $("#username").blur(function () {
                var username=$("#username").val();
                $.ajax({
                    url: "ajax", //数据提交的url，服务器的访问路径
                    type: "post",//数据请求的方式get/post 默认为get
                    //data: "ajaxValue=test",//提交的数据可以为字符串数组或json对象
                    data: {"username":username},//json对象
                    dataType: "text",   //预计服务器返回数据类型默认为text 一般使用json
                    success: function (result) {
                    //result为服务器返回的数据，可以自己在服务器端设置返回的数据
                       if(result==0){

                           //可以注册
                           $("#usernameSpan").html("可以注册");

                           $("#usernameSpan").css("color","green");
                       }else {

                          //用户名已存在
                           $("#usernameSpan").html("用户名已存在");

                           $("#usernameSpan").css("color","red");
                       }
                    },
                    error: function () {
                        alert("请求失败");
                    }
                });
            })

        })
    </script>
</head>
<body>
<input type="text" name="username" id="username"><span id="usernameSpan"></span>

</body>
</html>

下面为服务器端的代码



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.ArrayList;

@WebServlet("/ajax")
public class ajaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//设置请求和相应的编码格式，防止乱码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String username = request.getParameter("username");

        AccountService accountService=new AccountServiceimpl();
        ArrayList<Account> a = accountService.ajax(username);
        //根据用户名去数据库进行查询，判断该用户名是否存在，返回一个集合

        //System.out.println(a.size());
        if(a.size()==0){

            //集合长度为空，说明不存在，可以注册
            response.getWriter().print("0");
        }else {
         //集合长度不为空，说明存在，不能注册
            response.getWriter().print("1");
        }
    }
}

下面为效果图，鼠标移开时，输入框失去焦点，会自动进行异步验证
在这里插入图片描述

zxh.dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生ajax与jQuery ajax来异步验证

用原生ajax异步验证注册时用户名是否存在下面是ajax.html文件代码用post请求，当输入框失去焦点时进行异步验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
复制链接

扫一扫