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

最新推荐文章于 2024-07-24 11:09:48 发布

CodeWhisperer001

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量60

点赞数

分类专栏： Ajax 文章标签： servlet javascript ajax Powered by 金山文档

本文链接：https://blog.csdn.net/wei7a7a7a/article/details/129399070

版权

Ajax 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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

页面代码

<%@ 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>

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);
    }
}

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解决

CodeWhisperer001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3_案例开发之验证用户名

JS表单验证只能校验格式是否正确,但是无法验证用户名是否已经存在,这个就需要后台程序接受到数据后通过查询才能够完成的,那么这里就非常适用于使用异步方式校验,保证用于数据提交后,业务完成的成功率.提升用于体验感。2打开链接xhr.open("GET","loginServlet?原生js提交AJAX异步请求代码比较繁琐,处理复杂数据比较麻烦,后续可以使用jQuery解决。1 获取XMLHTTPRequest对象xhr=new XMLHttpRequest();
复制链接

扫一扫

专栏目录