javascript - responseText 不返回成功消息

Question

我正在尝试使用 Ajax 和 PHP 将数据插入数据库。现在的问题是 responseText 不返回任何消息，但插入成功完成这是我的脚本

    <script type="text/javascript">
    function aa() 
    {
        var x=new XMLHttpRequest();
        x.open("GET","ajax.php?na="+document.getElementById("t1").value+" &ag="+document.getElementById("t2").value+"&des="+document.getElementById("t3").value+"&em="+document.getElementById("t4").value+" ",true);
        x.send(null);
        document.getElementById("d1").innerHTML=x.responseText;
    }
</script>

这是我的 ajax.php

<?php 

$mysql_host = 'localhost'; 
$mysql_database = 'proj1'; 
$mysql_user = 'root'; 
$mysql_password='';
$mysqli = mysqli_connect($mysql_host, $mysql_user, $mysql_password, $mysql_database);
if (mysqli_connect_errno($mysqli))
{
    echo 'Failed to connect to MySQL: ' . mysqli_connect_error();
}
$name = $_GET['na'];
$ag = $_GET['ag'];
$des = $_GET['des'];
$em = $_GET['em'];
$sql=mysqli_query($mysqli,"insert into ajax_sample (id,name,age,desig,email) values ( '', '$name', '$ag' ,'$des', '$em'  )");
if($sql)
{
    echo "Successfully Inserted....";
}
?>

这是我的html页面

     <form name="f1" method="post">
    <input type="text" id="t1" placeholder="enter name"><br><br>
    <input type="text" id="t2" placeholder="enter age"><br><br>
    <input type="text" id="t3" placeholder="enter designation"><br><br>
    <input type="text" id="t4" placeholder="enter email"><br><br>
    <input type="button" id="b1" value="submit" onclick="aa();">
    <div id="d1"></p></div>
</form>

Answer 1

您需要使用 onreadystatechange Hook 异步更改回调以处理 XHR 请求完成时的情况。然后将在其上设置 .responseText。

function aa() 
{
    var x=new XMLHttpRequest();
    x.open("GET","ajax.php?na="+document.getElementById("t1").value+" &ag="+document.getElementById("t2").value+"&des="+document.getElementById("t3").value+"&em="+document.getElementById("t4").value+" ",true);
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.statusCode == 200) {
        document.getElementById("d1").innerHTML=x.responseText;
      }
    };
    x.send(null);
}

了解 XMLHttpRequest 是异步的很重要。这基本上意味着您请求通过 JavaScript 访问 URL，然后浏览器/JS 引擎关闭并执行此操作。您可以使用 onreadystatechange Hook 请求何时完成。下面链接的 MDN 页面有一个表，其中包含 readyState 的潜在值。

MDN:XMLHttpRequest和教程Using XMLHttpRequest