如何將GET方法更改爲使用php和ajax的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

有幾件事情，我想指出。首先，你正在執行的功能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表單，與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 CL耳朵上的任何事件處理程序。這允許重複使用同一個xmlHttp對象，這被認爲是更高的內存效率（但如果你正確地編寫代碼讓GC執行其工作，那真的沒關係）。因此，只需在onreadystatechange作業之前撥打.open電話，您應該很好。

2）onreadystatechange不只是被解僱一次。它被解僱多次，你需要能夠處理。這些都是代碼，你需要處理：

• 0 UNSENT - 的open（）沒有被調用尚未

• 1日開業 - 的send（）沒有被調用尚未

• 2 HEADERS_RECEIVED - send（）已被調用，且標題和狀態可用

• 3 LOADING下載 - responseText的持有部分數據

• 4響應準備 - 操作完成

因此你的錯誤檢查應該是xmlHttp.readyState==4檢查裏面，像這樣：

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

} 

Answer 2

你陳將您的請求發送至發佈 - 但似乎您沒有更改您的參數的位置。您仍將它們附加到您的網址：

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函數和之前發送功能。

端點轉儲POST變量和顯示爲證明內容，它經由JS的XMLHttpRequest工作

Answer 3

POST方法相比GET是有點不同。

只是一個快速的未經測試的例子：

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

基於o找到工作的例子n您的來源

• addStud函數缺失xmlHttp。setRequestHeader
• 和xmlHttp.send串缺少&連接參數

像這樣：

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

Answer 4

未定義的索引：q中的$ q = $ _ POST [「q」];在php文件中

也許是因爲您在使用q文件的JavaScript文件中使用q1，或者反之亦然。使它相同，它應該工作正常。

而且不要忘記xmlHttp.send前補充一點：

xmlHttp.setRequestHeader（ 「內容類型」， 「應用程序/ x-WWW的形式，進行了urlencoded」）;