javascript - 为什么没有从XMLHttpRequest返回响应？

我很想从连接到数据库的PHP文件中得到一些结果，但是发送到数据库的变量不是从XMLHttpRequest发送的。

HTML:

<input type="text" id="name"/>

这是JS:

var uname = document.getElementById('name');
function checkUser(){

    var xhr = new XMLHttpRequest();
    xhr.open("POST" , 'file.php' , true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange  = function(){
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            console.log(xhr.responseText);
        }
    }
    var userName = uname.value;
    xhr.send(userName);
}
uname.addEventListener("blur" , checkUser);

PHP:

if(isset($_POST['userName'])){
   echo $_POST['userName'];
}

如果删除该条件，则会收到一条消息，指出未定义userName索引。

最佳答案

正如上面的注释中指出的那样，您没有正确分配POST变量-每个变量都应该是name/value对，因此在这种情况下，您需要将名称设置为userName，并将值设置为form元素中的值。

function checkUser(){
    var xhr = new XMLHttpRequest();
    xhr.open( 'POST', 'file.php', true );
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange  = function(){
        if(this.readyState == 4 && this.status == 200)
        {
            console.log(xhr.responseText);
        }
    }
    /* As the function was bound to the input you can use `this` to get the value */
    xhr.send( 'userName='+this.value );
}

var uname = document.getElementById('name');
uname.addEventListener('blur' , checkUser.bind( uname ), false );/* bind function to field */

或者，一种更灵活的方法是执行ajax请求的小型函数，该请求可用于多个调用，而无需重复重写相同的代码。

function ajax( url, params, callback ){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange  = function(){
        if( this.readyState == 4 && this.status == 200 ) callback.call( this, this.response );
    };
    xhr.open( 'POST', url, true );
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send( params );
}



function checkUser(){
    ajax.call( this, 'file.php', 'username='+this.value, function(r){
        console.log( r );
    });
}

var uname = document.getElementById('name');
uname.addEventListener('blur' , checkUser.bind( uname ), false );

关于javascript - 为什么没有从XMLHttpRequest返回响应？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48576918/