[英]Sending a form with variable number of fields with AJAX, $_POST array is empty
[英]$_POST empty, sending form values with Ajax
HTML
<form action='insert.php' method='POST'>
<p><b>Client:</b><input type='text' name='idclient'/>
<p><b>Total:</b><br /><input type='text' name='total'/>
<p><input type='submit' value='Save' id="btnSave"/>
<input type='hidden' value='1' name='submitted' />
</form>
PHP (insert.php)
<?php
echo file_get_contents('php://input');
include_once "connect.php";
if ($db_found){
if (isset($_POST['submitted'])) {
foreach($_POST AS $key => $value) {
$_POST[$key] = mysql_real_escape_string($value);
}
$sql = "INSERT INTO `mytable` ( `idclient` , `total` , ) " .
"VALUES( {$_POST['idclient']} , {$_POST['total']} ) ";
mysql_query($sql) or die(mysql_error());
}
}
mysql_close($db_handle);
?>
這可以正常工作,但是當我嘗試使用 Ajax 調用插入時,$_POST function 是空的,我無法訪問表單中的值。
這是 ajax 代碼和 function 調用:
<form action="javascript:Save()" method='POST'>
Ajax
function Save()
{
xmlHttp = getXMLHttp(); // returns a new XMLHttpRequest or ActiveXObject
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4) {
document.getElementById("btnSave").value = "Saved";
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
else{
document.getElementById("btnSave").value = "Saving...";
}
}
xmlHttp.open("POST", "insert.php", true);
xmlHttp.send(null); // Do I need to create and pass a parameter string here?
}
做一個echo file_get_contents('php://input');
確實 $_POST 是空的,並且沒有傳遞參數值。
我可以像這樣連接 URL 中的參數值
xmlHttp.open("POST", "insert.php?idclient=123&total=43", true);
但是,有沒有辦法使用 $_POST 並利用它?
您需要將內容類型設置為application/x-www-form-urlencoded
以使值顯示在$_POST
中。
例如xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
(如果使用XMLHttpRequest
對象)。
根據答案,這是我想出的:
var xmlHttp = getXMLHttp(); // returns a new XMLHttpRequest or ActiveXObject
function Save() {
if(xmlhttp) {
xmlhttp.open("POST","insert.php",true);
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("idclient=" + document.getElementById("idclient").value
+ "&total=" + document.getElementById("total").value);
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
alert("responseText= " + xmlhttp.responseText);
document.getElementById("btnSave").value = "Saved";
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
else {
alert("Error during AJAX call. Please try again");
}
}
else{
document.getElementById("btnSave").value = "Saving...";
}
}
經過一段時間的搜索,我發現將這個 function 定義為單獨的(而不是在 onreadystatechange 中內聯,就像在原始問題中一樣)可以讓它工作。
xmlhttp.onreadystatechange = handleServerResponse;
但是,@Daren 對“特殊”輸入值提出了很好的意見。 例如,在字符串字段中傳遞“&”字符將獲得不完整的值。
試試這個為你的形式:
<form action="javascript:Save();return false;" method='POST'>
<p><b>Client:</b><input id='client' type='text' name='idclient'/>
<p><b>Total:</b><br /><input id='total' type='text' name='total'/>
<p><input type='submit' value='Save' id="btnSave"/>
<input type='hidden' value='1' name='submitted' />
</form>
然后像這樣撥打電話:
xmlHttp.open("POST", "insert.php", true);
var postStr = "idclient=" + document.getElementById("client").value + "&total=" + document.getElementById("total").value;
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(postStr);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.