jQuery Ajax将数据发布到同一页面PHP不工作
问题描述:
注意:这是一个jQuery编码练习,我不允许使用插件或其他模块。jQuery Ajax将数据发布到同一页面PHP不工作
问题:我有一个简单的表单,我要处理POST表单数据 - 同一页面处理。
HTML + PHP同一页上:
<?php
echo "<pre>";
print_r($GLOBALS);
echo "</pre>";
?>
<head>
<title>jQuery Forms</title>
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<form id="myForm" action="">
<input type="text" placeholder="Email" id="email" name="email">
<span class="error">Email not entered</span><br />
<input type="password" placeholder="Password" id="pword" name="pword">
<span class="error">Password not entered</span><br />
<input type="text" placeholder="First Name" id="fname" name="fname">
<span class="error">First Name not entered</span><br />
<input type="text" placeholder="Last Name" id="lname" name="lname">
<span class="error">Last Name not entered</span><br />
<input type="submit" value="Submit">
</form>
<script src="jquery.js"></script>
<script src="form.js"></script>
</body>
</html>
注:从这里了解如何使用AJAX,我读了url属性应留出此相同的页面处理其他的答案。
jQuery的form.js:
// jQuery form validation
$(document).ready(function(){
// field mapping
var form_fields = {
'email' : 'email',
'pword' : 'password',
'fname' : 'first name',
'lname' : 'last name'
};
// ajax data
var ajaxData = {};
// make sure form fields were entered
$('#myForm').on('submit', function(e){
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field).next().addClass('error_show');
} else if ($('#' + field).val()) {
$('#' + field).next().removeClass('error_show');
ajaxData[field] = $('#' + field).val();
}
}
console.log(ajaxData)
$.ajax({
type : 'POST',
data : ajaxData,
success : function() {
console.log('success');
},
error : function(xhr, status, errorThrown) {
console.log('error');
}
});
return false;
});
});
当我在数据键入到表单字段作为所以我得到从以下的jQuery:
ajaxData:Object {email: "[email protected]", pword: "123", fname: "Robert", lname: "Rocha"}
和指示成功消息它是成功的。然而,当我打印全局变量,看看被传递到页面什么数据他们拿出为空:
Array
(
[_GET] => Array
(
)
[_POST] => Array
(
)
[_COOKIE] => Array
(
)
[_FILES] => Array
(
)
[GLOBALS] => Array
*RECURSION*
)
答
您的代码工作正常 - 我拉下来,并在本地运行它,它事实上做将示例数据POST到您的服务器。
如果您使用的是Firefox或Chrome(或者其他浏览器应该没问题),您需要打开检查器/ Firebug并查看您的网络请求。
您通过http请求发送表单数据,因此您在浏览器中打开的实际页面不会更改或重新加载。相反,如果启用Show XMLHttpRequests
或Log XMLHttpRequests
,您将通过网络面板或当前页面看到请求。
如果你想拥有它提交回到同一页面重新加载,你可以更新您的表单提交处理程序做一些事情像这样:
// make sure form fields were entered
$('#myForm').on('submit', function (e) {
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field).next().addClass('error_show');
} else if ($('#' + field).val()) {
$('#' + field).next().removeClass('error_show');
ajaxData[field] = $('#' + field).val();
}
}
if ($('#myForm').find('.error_show').length) {
e.preventDefault();
}
});
注意我删除了AJAX代码,只是防止形式的,如果它不具有所有正确设置值的提交。
在您当前的html中,这会将它添加到您的页面URL作为发布数据。如果你想真正拥有它送过来的POST方法(推荐),则需要使用该设置来更新您的形式:
<form id="myForm" action="" method="post">
...
谢谢!看着它,你是对的。你知道我如何能做同样的页面表单处理使用jQuery和PHP,因为我张贴上面? –
当然!我会稍微更新答案。 – bonesbrigade
谢谢。它的工作方式并不是我想到的,我将不得不修改我的代码。 –