如何将ajax POST发送到php
如何将ajax POST发送到php
提问于 2013-09-20 07:24:05
我似乎想不出如何使用ajax来发布。我做了一个愚蠢的表单来尝试它，即使在将它一直减少到只有两个值之后，仍然不能得到任何工作。我的html是这样的：
<html>
<head>
<script type="text/javascript" src="j.js"></script>
<title>Test this<
<body>/title>
</head>
<form name="testForm" onsubmit="postStuff()" method="post">
First Name: <input type="text" name="fname" id="fname" /><br />
Last Name: <input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit Form" />
</form>
<div id="status"></div>
</body>
</html>然后，到目前为止，我的外部javascript只是一个函数：
function postStuff(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "processForm.php";
var fn = document.getElementById("fname").value;
var ln = document.getElementById("lname").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}而我的php只是回应这些东西：
<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
echo $firstname ." - ". $lastname ."<br />";
?>我在firebug和chrome的工具中找不到任何问题..有人能告诉我我做错了什么吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-09-20 08:06:29
制作：
<form name="testForm" onsubmit="postStuff()" method="post">
First Name: <input type="text" name="fname" id="fname" /> <br />
Last Name: <input type="text" name="lname" id="lname" /> <br />
<input type="submit" value="Submit Form" />
</form>添加到按钮标记中：
<form name="testForm">
First Name: <input type="text" name="fname" id="fname" /> <br />
Last Name: <input type="text" name="lname" id="lname" /> <br />
<button type="button" onclick="postStuff();">Submit Form!</button>
</form>据我所见，页面会从表单提交中刷新。如果您使用的是ajax，则不需要使用表单。
另请阅读：Why is using onClick() in HTML a bad practice?，因为不管怎样，您都是将post封装在一个函数中。
编辑:我刚刚注意到你的标题和标题标签在你上传的源代码中被破坏了。
Stack Overflow用户
发布于 2013-09-20 07:35:58
我是这样做的：
在html文件中放入<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></SCRIPT>
然后，您可以调用此函数，该函数将调用(在我的示例中) queryDB.php脚本。
function queryDB(db,query,doAfter){
$.ajax({
type: 'POST',
data: { host: "localhost",
port: "5432",
db: db,
usr: "guest",
pass: "guest",
statemnt: query
},
url: 'scripts/php/queryDB.php',
dataType: 'json',
async: false,
success: function(result){
// call the function that handles the response/results
doAfterQuery_maps(result,doAfter);
},
error: function(){
window.alert("Wrong query 'queryDB.php': " + query);
}
});
};Stack Overflow用户
发布于 2013-09-20 07:41:22
你需要在函数的末尾返回false。
function postStuff(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "processForm.php";
var fn = document.getElementById("fname").value;
var ln = document.getElementById("lname").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
return false;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18906547
复制相关文章
相似问题
腾讯云开发者
