Jquery ajax POST实例
POST可以用.ajax,.ajax基本用法像这样:
HTML
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
JavaScript:
// 变量来保存请求
var request;
// 绑定到我们的表单提交事件
$("#foo").submit(function(event){
// 中止任何挂起的请求
if (request) {
request.abort();
}
//设置一些局部变量
var $form = $(this);
//让我们来选择,并缓存所有的字段
var $inputs = $form.find("input, select, button, textarea");
//序列化表单中的数据
var serializedData = $form.serialize();
//在ajax的请求期间让我们禁用 inputs
//注:我们禁用元素后的表单数据已序列化。
// 禁用表单元素不会被序列化.
$inputs.prop("disabled", true);
//记录rq到 /form.php
request = $.ajax({
url: "/form.php",
type: "post",
data: serializedData
});
// 回调处理程序将被调用成功
request.done(function (response, textStatus, jqXHR){
// 记录一个信息到控制台
console.log("Hooray, it worked!");
});
// 回调处理程序将被调用失败
request.fail(function (jqXHR, textStatus, errorThrown){
// 记录一个错误信息到控制台
console.error(
"The following error occured: "+
textStatus, errorThrown
);
});
// 回调处理程序将调用被忽略的
// 如果请求失败或成功
request.always(function () {
// 重新启用inputs
$inputs.prop("disabled", false);
});
// 防止form调用默认的POST
event.preventDefault();
});
注:由于jQuery的1.8,success, .error和 .complete 被认为是已过时,用.done, .fail 和 .always代替。
注意:请记住,上面的代码段应该在所有的DOM加载完后起作用,所以你应该把它处理程序放在$(document).ready()内(或使用$()的简写)。
提示:您可以这样链回调处理程序:$.ajax().done().fail().always();
PHP (例如 form.php):
// 您可以访问jQuery.ajax提交过来的值
// 通过全局变量$ _POST,像这样:
$bar = $_POST['bar'];
注意:请务必对提交的数据进行处理,以防止注入和其他恶意代码。
您也可以用下面的代码提交,ajax的简化版本:
$.post('/form.php', serializedData, function(response) {
// log the response to the console
console.log("Response: "+response);
});
注:以上的JavaScript可以在jQuery 1.8下工作,但更适合以前的版本的Jquery,如1.5。