Ajax无按钮模式

本篇幅为实现注册页面无需提交按钮自动判断用户名是否存在

前言

这里我使用的是php环境，进行学习

php环境搭建可以直接使用phpstudy

ajax原理部分，可取隔壁看原理

代码实现

首先我们创建一个页面表单，用来输入数据，由于这里是用ajax实现的用户名判断，form表单中可以不设置action和method属性值

代码如下

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <title>
        验证表单
    </title>
    <body>
        <form>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="test" id="user">
                    </td>
                    <td>
                        <span id="span"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="test" name="pwd" id="pass">
                    </td>
                    <td><span></span></td>
                </tr>
           </table>
    </form>
    </body>
</html>

后端代码如下

<?php
$test = $_POST['user'];
if($test == 'admin'){
    echo 'no';
}else{
    echo 'ok';
}
?>

可以正常输出，如下图

ajax实现，使用js写法

<script>
    window.onload=function(){  ///js的入口函数
    //第一步获取上面的两个文本框
    var username = this.document.getElementById("user");//这里可以直接.value获取文本框的值
    var pass = this.document.getElementById("pass");//但不获取是为了给文本框做视界，以便于鼠标离开文本框就触发

    //通过onblur函数做视界
    username.onblur=function(){
        var userValue = username.value;//获取文本框的值
        console.log(userValue)///查看是否获取到了文本框的值

        //兼容性代码，在ie6版本以下是无法使用XMLHttpRequest的，所以
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //准备发送
        xhr.open("post","http://127.0.0.1/test/ajax/1.php",true);//这里的发送方式取决于后台，true待变异步发送
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");// 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
        var user = "user="+userValue;//定义发送内容
        console.log(user)
        xhr.send(user);

        //通过回调函数onreadystatechange进行数据回调
        xhr.onreadystatechange=function(){
            if (xhr.readyState == 4 && xhr.status == 200){//说明请求完成/响应200，说明请求成功
                var request = xhr.responseText;//获取响应的内容
                //console.log(request);
                if (request == "ok"){
                    document.getElementById("span").innerText="用户名可以使用";//回显到span标签
                }else{
                    document.getElementById("span").innerText="用户名已存在";
                }
            }
        }

    }

}
</script>