jQuery ajax - post() 实例

请求 test.php 网页，忽略返回值：

$.post("test.php");

通过 AJAX POST 请求改变 div 元素的文本：

$("input").keyup(function(){

txt=$("input").val();

$.post("demo_ajax.asp",{suggest:txt},function(result){

$("span").html(result);

});

});

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法样式：

jQuery.post(url, [data], [callback], [type])

jQuery.post(url, data, success(data, textStatus, jqXHR), dataType)

参数说明：

url: 发送请求地址。

data: 待发送 Key/value 参数。

callback: 发送成功时回调函数。

type: 返回内容格式 xml, html, script, json, text, _default

参数

描述

url

必需。规定把请求发送到哪个 URL。

data

可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR)

可选。请求成功时执行的回调函数。

dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script、html)

详细说明

该函数是简写的 Ajax 函数，等价于：

$.ajax({

type: 'POST',

url: url,

data: data,

success: success,

dataType: dataType

});

完整示例：

$.ajax({

url : 'lib/order.php',

type : "post",

dataType: "json",

data : {

"user_email": user_email,

"pay_type":buy_paytype,

"orderid":orderid,

"unit_name_en":unit_name_en,

"unit_name_ch":unit_name_ch,

"unit_quantity": unit_quantity,

"unit_price":unit_price,

"is_express":is_express,

"total_price":total_price

},

async: false,

cache: false,

success: function(data){

if(data && data.code == 0){

$('#postcontent').text("下单成功");

window.location.href = data.go_url;

}

else if(data && data.code == 1){

$('#postcontent').text("请先登录");

window.location.href = 'usercenter/login.php';

}

else if(data && data.code == 8){

$('#postcontent').text("续单成功");

var jump_url = 'usercenter/orderdetail.php?orderid='+orderid;

jump(3, jump_url);

$('#postcontent_err').text(data.code_msg).show();

}

else {

$('#postcontent_err').text(data.code_msg).show();

}

},

error: function(){

$("#postcontent_err").text("系统错误，请稍后再试，或联系管理员").show();

}

});

function jump(count, forurl) {

window.setTimeout(function(){

count--;

if(count > 0) {

$('#postcontent').text(count + "秒后跳转");

jump(count, forurl);

} else {

window.location.href = forurl;

}

}, 1000);

}

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，

这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。

也可向 success 回调函数传递响应的文本状态。

对于 jQuery 1.5，也可以向 success 回调函数传递 jqXHR 对象(jQuery 1.4 中传递的是 XMLHttpRequest 对象)。

大部分实现会规定一个 success 函数：

$.post("ajax/test.html", function(data) {

$(".result").html(data);

});

本例读取被请求的 HTML 片段，并插入页面中。

通过 POST 读取的页面不被缓存，因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError() 方法。

或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

jqXHR 对象

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序，请记住该请求针对 jqxhr 对象

var jqxhr = $.post("example.php", function() {

alert("success");

})

.success(function() {

alert("second success");

})

.error(function() {

alert("error");

})

.complete(function() {

alert("complete");

});

// 在这里执行其他任务

// 为上面的请求设置另一个完成函数

jqxhr.complete(function(){

alert("second complete");

});

更多实例

例子 1

请求 test.php 页面，并一起发送一些额外的数据(同时仍然忽略返回值)：

$.post("test.php", { name: "John", time: "2pm" } );

例子 2

向服务器传递数据数组(同时仍然忽略返回值)：

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

例子 3

使用 ajax 请求发送表单数据：

$.post("test.php", $("#testform").serialize());

例子 4

输出来自请求页面 test.php 的结果(HTML 或 XML，取决于所返回的内容)：

$.post("test.php", function(data){

alert("Data Loaded: " + data);

});

例子 5

向页面 test.php 发送数据，并输出结果(HTML 或 XML，取决于所返回的内容)：

$.post("test.php", { name: "John", time: "2pm" },

function(data){

alert("Data Loaded: " + data);

});

例子 6(返回 xml)

获得 test.php 页面的内容，并存储为 XMLHttpResponse 对象，并通过 process() 这个 JavaScript 函数进行处理：

$.post("test.php", { name: "John", time: "2pm" },

function(data){

process(data);

}, "xml");

例子 7(返回 json)

获得 test.php 页面返回的 json 格式的内容：

$.post("test.php", { "func": "getNameAndTime" },

function(data){

alert(data.name); // John

console.log(data.time); // 2pm

}, "json");

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数

描述

执行异步 HTTP (Ajax) 请求。

当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。

在 Ajax 请求发送之前显示一条消息。

设置将来的 Ajax 请求的默认值。

当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。

当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

当 Ajax 请求成功完成时显示一条消息。

使用 HTTP GET 请求从服务器加载数据。

使用 HTTP GET 请求从服务器加载 JSON 编码数据。

使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。

从服务器加载数据，然后把返回到 HTML 放入匹配元素。

创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。

使用 HTTP POST 请求从服务器加载数据。

将表单内容序列化为字符串。

序列化表单元素，返回 JSON 数据结构数据。

JS打开新窗口的2种方式

window.location.href="https://mimvp.com";    // 在同当前窗口中打开窗口

window.open("https://mimvp.com");            // 在另外新建窗口中打开窗口