javascript - 如何使用 php 和 ajax 将 GET 方法更改为 POST 方法

Question

我在 php 和 ajax 文件中将 GET 方法更改为 POST，但这里的逻辑错误是每次我将学生添加到数据库时它都不起作用。我无法真正找出问题所在，因为我是 AJAX 新手。

这是我的代码:

用于添加的php文件

<?php
//I changed to POST
$q1=$_POST["q1"];
$q2=$_POST["q2"];
$q3=$_POST["q3"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("stud", $con);

$sql="INSERT INTO stud_info(IDno, LName, FName) VALUES ('$q1', '$q2', '$q3')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }


mysql_close($con);
?>

获取种群ID

<?php

$q=$_POST["q"]; //I changed to POST

$con = mysql_connect('localhost', 'root', '');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("stud", $con);

$sql="SELECT * FROM stud_info WHERE IDno like '".$q."%'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>IDno</th>
<th>LName</th>
<th>FName</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['IDno'] . "</td>";
 echo "<td>" . $row['LName'] . "</td>";
 echo "<td>" . $row['FName'] . "</td>"; 
 echo "</tr>";
 }
echo "</table>";

mysql_close($con);
?>

JavaScript for ajax 效果不是很好

// JavaScript Document
var xmlHttp;

function showStud(id)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="getStud.php";
    url=url+"?q="+id;   
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function addStud(id, ln, fn)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="addStud.php";
    url=url+"?q1="+id+"&q2="+ln+"&q3="+fn;  
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function editStud(id, ln, fn)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="editStud.php";
    url=url+"?q1="+id+"&q2="+ln+"&q3="+fn;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function deleteStud(id)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="deleteStud.php";
    url=url+"?q="+id;   
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function stateChanged() 
{ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    { 
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    } 
}

function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        //Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

Answer 1

有几件事我想指出。首先，您在这里执行函数 stateChanged:

xmlHttp.onreadystatechange=stateChanged;

并将该函数的结果(在本例中为 undefined)分配给 xmlHttp.onreadystatechange。

现在，当就绪状态改变时，XMLHttpRequest 会尝试调用 onreadystatechange，它现在是 undefined，所以什么都不会发生。

试试这个:

function stateChanged(){
    return function(){
        if(xmlHttp.readyState==4){
            if (xmlHttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
            }

        }
    }
}

现在，您仍然将函数的结果分配给 http.onreadystatechange，但这次它是一个可调用函数，而不是 undefined。

其次，要像 HTML 表单一样 POST 数据，请使用 setRequestHeader() 添加 HTTP header ，并在 send() 中指定要发送的数据方法，像这样:

// Example of deleteStud(id) function
var url="deleteStud.php";
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=stateChanged();
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("q="+id);

已编辑:

例如，您的 showStud 函数将是这样的，

function GetXmlHttpObject(){
    // your code
}

function stateChanged(){
    return function(){
        if(xmlHttp.readyState==4){
            if (xmlHttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
            }

        }
    }
}

function showStud(id)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null){
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="getStud.php";
    xmlHttp.open("POST",url,true);
    xmlHttp.onreadystatechange=stateChanged();
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send("q="+id);
}

因此相应地更改您的其他功能。

重新编辑:

您还需要了解一些其他关键事项。

1)正确的调用顺序是:

• 新的 XMLHttpRequest
• xmlHttp.open()
• xmlHttp.onreadystatechange = ...
• xmlHttp.send()

在某些浏览器中，调用 .open 会清除其上的所有事件处理程序。这允许干净地重用相同的 xmlHttp 对象，这应该更节省内存(但如果您正确编码以让 GC 完成其工作，那真的无关紧要)。因此，只需将 .open 调用放在 onreadystatechange 赋值之前，您就可以开始了。

2) onreadystatechange 不只触发一次。它被触发了多次，你需要能够处理它。这些是您需要处理的代码:

• 0 UNSENT - open() 尚未调用

• 1 OPENED - send() 尚未被调用

• 2 HEADERS_RECEIVED - 已调用 send()，并且 header 和状态可用

• 3 LOADING 下载 - responseText 包含部分数据

• 4 RESPONSE 就绪 - 操作完成

因此您的错误检查应该在 xmlHttp.readyState==4 检查中，如下所示:

if(xmlHttp.readyState==4){
    if (xmlHttp.status==200){
        // your code
    }

}