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

您将请求更改为 post - 但您似乎没有更改参数的位置。您仍然将它们附加到您的 url:

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

更新：由于您附上了 Dropbox 文件夹/内容，我试过了。

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

您的代码示例：

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

重要提示：需要在打开函数之后和发送函数之前调用 seRequestHeader 函数。

Endpoint 转储 POST 变量并显示内容作为它有效的证据

Answer 2

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

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

得到

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

POST

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

有几件事我想指出。首先，您在这里执行函数 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。

其次，对于 POST 数据，如 HTML 表单，添加一个带有 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);
}

所以相应地改变你的其他功能。

Re-edited:

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

1)正确的调用顺序是：

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

在某些浏览器中，调用 .open 会清除其上的所有事件处理程序。这允许干净的 re-use 相同的 xmlHttp object，据说更多 memory-efficient （但如果你正确编码让 GC 执行它，那真的没关系工作）。所以，只需将 .open 调用放在 onreadystatechange 赋值之前，你就可以开始了。

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

0 UNSENT - open() 尚未被调用
1 已打开 - send() 尚未调用
2 HEADERS_RECEIVED - send() 已调用，headers 和状态可用
3 LOADING 下载 - responseText 包含部分数据
4 RESPONSE 就绪 - 操作完成

因此你的错误检查应该在 xmlHttp.readyState==4 检查中，像这样：

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

}

Answer 4

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

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

并且不要忘记在 xmlHttp.send 之前添加：

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

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

How do I change GET method to POST method using php and ajax

javascript

php

ajax