responseText不会返回成功消息

时间:2015-06-24 06:01:24

标签: javascript php ajax

我正在尝试使用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>

1 个答案:

答案 0 :(得分:3)

您需要使用onreadystatechange挂钩异步更改回调来处理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在请求完成时挂钩。下面链接的MDN页面有一个表格,其中包含readyState的潜在值。

MDN:XMLHttpRequest和教程Using XMLHttpRequest