3_案例开发之验证用户名

╰+哭是因爲堅強的太久メ 2023-09-27 15:34 84阅读 0赞

AJAX之验证用户名是否被占用

JS表单验证只能校验格式是否正确,但是无法验证用户名是否已经存在,这个就需要后台程序接受到数据后通过查询才能够完成的,那么这里就非常适用于使用异步方式校验,保证用于数据提交后,业务完成的成功率.提升用于体验感

![edfea7bf73659b9199305a51ad8b0290.png][]

页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>$Title%sSourceCode%lt;/title>
        <script>
          var xhr ;
          function checkUname(){
            // 获取输入框中的内容
            var unameDOM=document.getElementById("unameI");
            var unameText =unameDOM.value;
            var unameInfoDom =document.getElementById("unameInfo");
            if(null == unameText || unameText == ''){
              unameInfoDom.innerText="用户名不能为空";
              return;
            }
            unameInfoDom.innerText="";
            // 发送异步请求
            // 获取一个 XMLHttpRequest对象 ,对象可以帮助我们发送异步请求
            xhr =new XMLHttpRequest();
            // 使用xhr对象设置打开链接,设置请求方式和参数xhr.open("请求方式","请求的URL",是否使用异步方式);
            xhr.open("GET","unameCheckServlet.do?uname="+unameText,true);
            // 设置回调函数
            xhr.onreadystatechange=showReturnInfo;
            // 正式发送请求
            xhr.send(null);
          }
          function showReturnInfo(){
            if(xhr.readyState==4 && xhr.status==200){
              var returnInfo =xhr.responseText;
              var unameInfoDom =document.getElementById("unameInfo");
              unameInfoDom.innerText=returnInfo;
            }
          }
        </script>
      </head>
      <body>
      <form action="myServlet1.do" >
        用户名:<input id="unameI" type="text" name="uname" onblur="checkUname()"><span id="unameInfo" style="color: red"></span><br/>
        密码:<input type="password" name="pwd"><br/>
        <input type="submit">
      </form>
      </body>
    </html>

![a2e39f1d88b5cdf6bd46ee7839bd645a.gif][]

![d74aaeb28b434328481c34bebbcf4e2a.gif][]

servlet代码

package com.msb.servlet;
    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;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @WebServlet("/unameCheckServlet.do")
    public class UnameCheckServlet extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String uname = req.getParameter("uname");
            String info="";
            if("msb".equals(uname)){
                info="用户名已经占用";
            }else{
                info="用户名可用";
            }
            // 向浏览器响应数据
            resp.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");
            resp.getWriter().print(info);
        }
    }

![7ee51b41c66733f41e3d699a3d4a5698.gif][]

![4eedbc11f8ba6c62f45d1df590326bb7.gif][]

AJAX异步提交请求的步骤为

1 获取XMLHTTPRequest对象xhr=new XMLHttpRequest();

2打开链接xhr.open("GET","loginServlet?uname="+uname,true);

3设置回调函数xhr.onreadystatechange=showRnturnInfo;

4提交数据 xhr.send(data)

目前存在的问题

原生js提交AJAX异步请求代码比较繁琐,处理复杂数据比较麻烦,后续可以使用jQuery解决

[edfea7bf73659b9199305a51ad8b0290.png]: https://img-blog.csdnimg.cn/img_convert/edfea7bf73659b9199305a51ad8b0290.png
[a2e39f1d88b5cdf6bd46ee7839bd645a.gif]: https://img-blog.csdnimg.cn/img_convert/a2e39f1d88b5cdf6bd46ee7839bd645a.gif
[d74aaeb28b434328481c34bebbcf4e2a.gif]: https://img-blog.csdnimg.cn/img_convert/d74aaeb28b434328481c34bebbcf4e2a.gif
[7ee51b41c66733f41e3d699a3d4a5698.gif]: https://img-blog.csdnimg.cn/img_convert/7ee51b41c66733f41e3d699a3d4a5698.gif
[4eedbc11f8ba6c62f45d1df590326bb7.gif]: https://img-blog.csdnimg.cn/img_convert/4eedbc11f8ba6c62f45d1df590326bb7.gif