如何阿贾克斯POST到PHP [英] How to ajax POST to php
问题描述
我似乎无法弄清楚如何使用Ajax来发布。我犯了一个愚蠢的形式来尝试一下，甚至削减了它一路下降到只有两个值后，仍无法得到任何工作。我的HTML是这样的：
I can't seem to figure out how to use ajax to post. I made a silly form to try it out and even after having cut it all the way down to just two values, still can't get anything to work. My html is this:
<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只是一个单一的功能至今：
Then, my external javascript is just a single function so far:
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只是呼应了东西回来：
While my php just echoes the stuff back:
<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
echo $firstname ." - ". $lastname ."<br />";
?>
我找不到任何错误的萤火或镀铬的toolsy一样的东西.. 有谁能够谁我什么，我做错了什么？
I can't find anything wrong in firebug or in chrome's toolsy thingies.. Can anybody who me what I'm doing wrong?
推荐答案
请了：
<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>
成一个按钮标签：
into a button tag:
<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使用的一种形式。
The page refreshes from the form submit as far as I can see. You don't need to use a form if you're using ajax.
另请阅读：为什么在HTML中使用的onClick（）一个不好的做法？因为你封闭后的功能呢。
Also read: Why is using onClick() in HTML a bad practice? since you're enclosing the post in a function anyway.
编辑：我只注意到你的标题和头部标记你竖起源破
I just noticed your title and head tags are broken in the source you've put up.
这篇关于如何阿贾克斯POST到PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
