thinkPHP5——ajax异步刷新之注册

今天学习ajax异步刷新之注册，源文件如图所示

1.HTML文件代码：

<!--html文件的主要代码-->
用户
<div>
<input type="text" id="username" name="username" onblur="register_name()">
</div>
<div><span id="check1" style="color: red"></span></div>

2.js文件代码

//js文件主要代码，此为原生js代码
function register_name(){
    var username=document.getElementById("username").value;//获取值
    if(username==''){
        document.getElementById('check1').innerHTML='不能为空';
        return false;
    }
    var ajaxObj =new XMLHttpRequest();
    ajaxObj.onreadystatechange=function(){
        if (ajaxObj.readyState==4){
            document.getElementById('check1').innerHTML = ajaxObj.responseText;
        }
    }
    ajaxObj.open('get','../register/check?username='+username);
    ajaxObj.send(null);
}

js用JQ简化过的代码

//此为jq简化过的js主要代码，必须在HTML文件加
//<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
function register_name(){
    //var username=document.getElementById("username").value;
    var username=$('#username').val();
    var check1=$("#check1");
    if(username==''){
       // document.getElementById('check1').innerHTML='不能为空';
        //$("#check1").html('不能为空');
        check1.html('不能为空');
        return false;
    }
     /*var ajaxObj =new XMLHttpRequest();
    ajaxObj.onreadystatechange=function(){
        if (ajaxObj.readyState==4){
            //document.getElementById('check1').innerHTML = ajaxObj.responseText;
            check1.html(ajaxObj.responseText);
        }
    }
    ajaxObj.open('get','../register/check?username='+username);
    ajaxObj.send(null);*/

    else {
        $.get({url:('../register/check.html')},{"username":name},function(data){
            check1.html(data);
        });
    }
}

3.控制器的主要代码

//PHP控制器内的主要代码
public function check(){
        $username=input('username');
        $info=db('member')
            ->where('username','=',$username)
            ->find();
        if(empty($info)){
            echo"ok";
        }
        else{
            echo "用户名已存在";
        }
        exit;
    }

4.页面效果如下：