使用Ajax进行用户名动态校验,局部属性页面

前端之家收集整理的这篇文章主要介绍了使用Ajax进行用户名动态校验,局部属性页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用Ajax进行用户名动态校验,局部属性页面

1.在HTML页面中使用js脚本将请求数据发送给后台servlet

  • 由按钮触发校验事件
    <input type="text" name="check" onblur="checkUsername(this.value)">
  • 相应的处理脚本
var req = new XMLHttpRequest();
    function checkUsername(name){
        req.open("POST","/javaweb/servlet/CheckNameServlet",true);
        //如果请求类型是post,则必须设置以下属性
        req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //设置回调函数
        req.onreadystatechange=callback;
        //发送Ajax请求,数据发送方式和表单get方式相同
        req.send("username="+name);
    }

2.后台获取的数据进行校验,将结果返回给前台

public void doPost(HttpServletRequest request,HttpServletResponse response) throws Exception {

        //从请求中获取需要校验的用户名
        String username = request.getParameter("username");

        //调用相应的方法进行校验
        MyService service = new MyService();
        boolean result = service.checkName(username);

        //根据校验结果将文本信息发送给客户端
        response.setContentType("text/plain");
        response.setHeader("Cache-control","no-cache");

        PrintWriter out = response.getWriter();
        if(rseult){
            out.write("用户名可以使用");
        }
        else{
            out.write("用户名已被占用");
        }

        out.flush();
        out.close();
    }

3.刷新局部页面

  • 回调函数(展示处理结果)
function callback(){
        if(req.readyState==4&&req.status==200){ alert(req.responseText); }
    }

猜你在找的Ajax相关文章