jQuery中ajax - post() 方法實(shí)例詳解
在jquery中的ajax有二個(gè)數(shù)據(jù)發(fā)送模式,一種是get,另一種是post()。
實(shí)例
請(qǐng)求 test.php 網(wǎng)頁,忽略返回值:
$.post("test.php");
TIY 實(shí)例
通過 AJAX POST 請(qǐng)求改變 div 元素的文本:
$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ $("span").html(result); }); });
親自試一試
定義和用法
post() 方法通過 HTTP POST 請(qǐng)求從服務(wù)器載入數(shù)據(jù)。
語法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
詳細(xì)說明
該函數(shù)是簡(jiǎn)寫的 Ajax 函數(shù),等價(jià)于:
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType });
根據(jù)響應(yīng)的不同的 MIME 類型,傳遞給 success 回調(diào)函數(shù)的返回?cái)?shù)據(jù)也有所不同,這些數(shù)據(jù)可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 對(duì)象。也可向 success 回調(diào)函數(shù)傳遞響應(yīng)的文本狀態(tài)。
對(duì)于 jQuery 1.5,也可以向 success 回調(diào)函數(shù)傳遞 jqXHR 對(duì)象(jQuery 1.4 中傳遞的是 XMLHttpRequest 對(duì)象)。
大部分實(shí)現(xiàn)會(huì)規(guī)定一個(gè) success 函數(shù):
$.post("ajax/test.html", function(data) { $(".result").html(data); });
本例讀取被請(qǐng)求的 HTML 片段,并插入頁面中。
通過 POST 讀取的頁面不被緩存,因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 選項(xiàng)不會(huì)影響這些請(qǐng)求。
注釋:由于瀏覽器安全方面的限制,大多數(shù) "Ajax" 請(qǐng)求遵守同源策略;請(qǐng)求無法從不同的域、子域或協(xié)議成功地取回?cái)?shù)據(jù)。
注釋:如果由 jQuery.post() 發(fā)起的請(qǐng)求返回錯(cuò)誤代碼,那么不會(huì)有任何提示,除非腳本已調(diào)用了全局的 .ajaxError() 方法。或者對(duì)于 jQuery 1.5,jQuery.post() 返回的 jqXHR 對(duì)象的 .error() 方法也可以用于錯(cuò)誤處理。
jqXHR 對(duì)象
對(duì)于 jQuery 1.5,所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 對(duì)象的超集。由 $.post() 返回的 jQuery XHR 對(duì)象或 "jqXHR,"實(shí)現(xiàn)了約定的接口,賦予其所有的屬性、方法,以及約定的行為。出于對(duì)由 $.ajax() 使用的回調(diào)函數(shù)名稱便利性和一致性的考慮,它提供了 .error(), .success() 以及 .complete() 方法。這些方法使用請(qǐng)求終止時(shí)調(diào)用的函數(shù)參數(shù),該函數(shù)接受與對(duì)應(yīng)命名的 $.ajax() 回調(diào)函數(shù)相同的參數(shù)。
jQuery 1.5 中的約定接口同樣允許 jQuery 的 Ajax 方法,包括 $.post(),來鏈接同一請(qǐng)求的多個(gè) .success()、.complete() 以及 .error() 回調(diào)函數(shù),甚至?xí)谡?qǐng)求也許已經(jīng)完成后分配這些回調(diào)函數(shù)。
// 請(qǐng)求生成后立即分配處理程序,請(qǐng)記住該請(qǐng)求針對(duì) jqxhr 對(duì)象 var jqxhr = $.post("example.php", function() { alert("success"); }) .success(function() { alert("second success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); // 在這里執(zhí)行其他任務(wù) // 為上面的請(qǐng)求設(shè)置另一個(gè)完成函數(shù) jqxhr.complete(function(){ alert("second complete"); });
更多實(shí)例
例子 1
請(qǐng)求 test.php 頁面,并一起發(fā)送一些額外的數(shù)據(jù)(同時(shí)仍然忽略返回值):
$.post("test.php", { name: "John", time: "2pm" } );
例子 2
向服務(wù)器傳遞數(shù)據(jù)數(shù)組(同時(shí)仍然忽略返回值):
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
例子 3
使用 ajax 請(qǐng)求發(fā)送表單數(shù)據(jù):
$.post("test.php", $("#testform").serialize());
例子 4
輸出來自請(qǐng)求頁面 test.php 的結(jié)果(HTML 或 XML,取決于所返回的內(nèi)容):
$.post("test.php", function(data){ alert("Data Loaded: " + data); });
例子 5
向頁面 test.php 發(fā)送數(shù)據(jù),并輸出結(jié)果(HTML 或 XML,取決于所返回的內(nèi)容):
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
例子 6
獲得 test.php 頁面的內(nèi)容,并存儲(chǔ)為 XMLHttpResponse 對(duì)象,并通過 process() 這個(gè) JavaScript 函數(shù)進(jìn)行處理:
$.post("test.php", { name: "John", time: "2pm" }, function(data){ process(data); }, "xml");
例子 7
獲得 test.php 頁面返回的 json 格式的內(nèi)容:
$.post("test.php", { "func": "getNameAndTime" }, function(data){ alert(data.name); // John console.log(data.time); // 2pm }, "json");
以上內(nèi)容通過實(shí)例給大家介紹了jQuery中ajax - post() 方法示例詳解,希望對(duì)大家今后的工作學(xué)習(xí)有所幫助,在下篇文章將給大家介紹jquery中ajax-get()方法示例詳解,需要的朋友請(qǐng)持續(xù)關(guān)注本站。
相關(guān)文章
ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
ajax傳遞一個(gè)參數(shù)或多個(gè)參數(shù)在使用過程中由于特殊需求經(jīng)常會(huì)用到,下面與大家分享下具體的實(shí)現(xiàn)方法,感興趣的朋友可以參考下哈2013-05-05IE下jquery ajax無法獲得最新數(shù)據(jù)的問題解決(IE緩存)
利用ajax查詢數(shù)據(jù),在谷歌瀏覽器下可以獲取到最新數(shù)據(jù),而在IE中獲得是舊數(shù)據(jù),無法獲得最新的數(shù)據(jù),經(jīng)查資料,才發(fā)現(xiàn)時(shí)IE緩存再作怪2013-08-08ajax實(shí)現(xiàn)改變狀態(tài)和刪除無刷新的實(shí)例
下面小編就為大家分享一篇ajax實(shí)現(xiàn)改變狀態(tài)和刪除無刷新的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語言Less寫成。下面通過本文給大家介紹Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解
這篇文章主要介紹了AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01揭開AJAX神秘的面紗(AJAX個(gè)人學(xué)習(xí)筆記)
寫這個(gè)學(xué)習(xí)筆記,只是記載一下自己的學(xué)習(xí)經(jīng)過和體會(huì),把一些學(xué)習(xí)重點(diǎn)記錄下來,以備今后的鞏固復(fù)習(xí)及應(yīng)用,很多知識(shí)點(diǎn)沒有詳細(xì)介紹,所以并不完全適用于初學(xué)者,如果你是初學(xué)者,最好選擇一本AJAX學(xué)習(xí)的書籍,然后與這篇學(xué)習(xí)筆記對(duì)照學(xué)習(xí),效果會(huì)更好。2009-09-09jQuery+Ajax+PHP實(shí)現(xiàn)“喜歡”評(píng)級(jí)功能附源碼下載
有同學(xué)問我如何實(shí)現(xiàn)一個(gè)像美麗說那樣的“我喜歡”評(píng)級(jí)功能,當(dāng)用戶看到自己喜歡的圖片或文章時(shí),點(diǎn)擊“紅心”按鈕,系統(tǒng)會(huì)自動(dòng)記錄用戶的點(diǎn)擊,并將總數(shù)加1。這樣再結(jié)合不同的系統(tǒng),可以將此功能應(yīng)用到投票或收藏商品中去(如淘寶的收藏商品)。2015-10-10ajax方式實(shí)現(xiàn)注冊(cè)功能(提交數(shù)據(jù)到后臺(tái)數(shù)據(jù)庫完成交互)
這篇文章主要介紹了ajax方式實(shí)現(xiàn)注冊(cè)功能,提交數(shù)據(jù)到后臺(tái)數(shù)據(jù)庫完成交互,感興趣的小伙伴們可以參考一下2016-08-08