为啥 XMLHttpRequest 没有回复？

Posted 2023-02-19

【中文标题】为啥 XMLHttpRequest 没有回复？

【英文标题】：Why there is no response back from XMLHttpRequest?为什么 XMLHttpRequest 没有回复？

【发布时间】：2018-07-12 14:44:50

【问题描述】：

我想从连接到数据库的 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 索引。

【问题讨论】：

尝试将var userName = uname.value; 更改为var userName = 'userName=' + uname.value;。向 Ajax 传递数据时，需要使用查询格式：fieldname=value&anotherfield=somevalue。 注意： 将变量传递给函数时，不会传递变量名，因此变量名为 userName 的事实无关紧要。

【参考方案1】：

正如上面评论中指出的，您没有正确分配 POST 变量 - 每个都应该是 name/value 对，因此在这种情况下，您可以将名称设置为 userName，并将值设置为表单元素中的值.

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

【参考方案2】：

试试这个。应该这样做。

var userName = uname.value;
xhr.send("data" + userName); 

你的 PHP 应该像这样处理。在这种情况下，将其放在变量 ($response) 中，并在代码末尾回显 var。

$data = $_POST['data'];
if(isset($_POST['data']))
$username = $_POST['data'];
 else 
$username = "Data Not Set"
echo $username;

【参考方案3】：

你需要在你的php端添加file_get_contents，

    $uname = file_get_contents("php://input");
if(isset($uname))
   echo $uname;