如何使用 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。

现在，当 readystate 改变时，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 标头，并在 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)正确的调用顺序是：

• new XMLHttpRequest
• xmlHttp.open()
• xmlHttp.onreadystatechange = ...
• xmlHttp.send()

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

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

• 0 未发送 - open() 尚未调用

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

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

• 3 LOADING 下载 - responseText 保存部分数据

• 4 RESPONSE 准备就绪 - 操作完成

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

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

}

Answer 2

通过 JS XMLHttpRequest 的 POST 方法与 GET 相比有点不同。

只是一个未经测试的快速示例：

获取

url=url+"?q1="+id+"&q2="+ln+"&q3="+fn;  
xmlHttp.open("GET",url,true);
xmlHttp.send();

发布

url=url;  // stays the same
xmlHttp.open("POST",url,true);
xmlHttp.send(q1="+id+"&q2="+ln+"&q3="+fn); // params go into .send()

您可以在w3schools.com找到工作示例

根据您的来源

• addStud 函数缺少 xmlHttp.setRequestHeader
• xmlHttp.send 字符串丢失和连接参数

像这样：

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("q1="+id+"&q2="+ln+"&q3="+fn);

Answer 3

未定义索引：$q中的q=$_POST["q"];在php文件中

可能是因为您在 php 文件中使用 q1，而在 javascript 文件中您仅使用 q，反之亦然。使其相同，它应该可以正常工作。

别忘了在 xmlHttp.send 之前加上这个：

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

Answer 4

您更改了发布请求 - 但您似乎没有更改参数的位置。您仍然将它们附加到您的网址：

xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("POST",url,true);
xmlHttp.send(null);

您在请求正文中发送“null”。

您需要发送正文中的参数以使其按您预期的方式工作。请参阅：http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp 了解更多信息。

编辑：小（未经测试）示例：

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("q=test?data=asd?moredata=das");

更新：既然你附加了保管箱文件夹/内容，我试过了。

您仍然缺少上面列出的基本功能 seRequestHeader。添加后，我可以读取 POST 数据。

您的代码示例：

xmlHttp.open("POST","getStud.php",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("q="+id);

重要提示：seRequestHeader 函数需要在 open 函数之后和 send 函数之前调用。

端点转储 POST 变量并显示内容以证明其有效