ajax异步请求——form表单提交 及 表单序列化提交
ajax異步請求
AJAX介紹
AJAX 指異步 JavaScript 及 XML（Asynchronous JavaScript And XML），它不是一種新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 基于 JavaScript 和 HTTP 請求（HTTP requests）的，因?yàn)锳JAX 通過在后臺與服務(wù)器交換少量數(shù)據(jù)的方式，允許網(wǎng)頁進(jìn)行異步更新。即在不重載整個頁面的情況下，對網(wǎng)頁的一部分進(jìn)行更新，通過 AJAX，你可以創(chuàng)建更好、更快以及更友好的 WEB 應(yīng)用程序。
當(dāng)然，Ajax也不是任何資源都可以調(diào)用，雖然它可以調(diào)用動態(tài)頁面、靜態(tài)頁面，也可以調(diào)用json對象，但是由于瀏覽器無法解析二進(jìn)制文件，故調(diào)用圖片等時就會報錯。在調(diào)用json對象時，須使用eval（"(" + 返回的對象 + “)”）; ，否則無法解析對象的資源。
$.ajax()使用
項(xiàng)目中，對于使用 $.ajax 獲取后臺數(shù)據(jù)是很簡單的，根據(jù)后臺給的接口文檔，直接調(diào)用就好了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Ajax 請求</title><script src="./jquery.min.js"></script> </head> <style>.result{width:200px;height: 200px;border:1px #0f0 solid;margin-bottom: 20px;} </style> <body><button type="button">使用 ajax請求 獲取數(shù)據(jù)</button><div class="result"></div><script>$(function(){$('button').on('click',function(){//使用 Ajax 請求方式；$.ajax({type:'POST', //請求類型url:'/getList', //請求路徑dataType:'json', //數(shù)據(jù)類型data:{ //提交的參數(shù)id:1},success:function(data){ //請求成功后的回調(diào)$('.result').html(data);},error:function(XMLHttpRequest, textStatus, errorThrown){ //請求失敗后的回調(diào)console.log(textStatus);}})});});</script> </body> </html>$.ajax() 常用參數(shù)
-
type 類型：String ， 默認(rèn)值: “GET”。
請求方式 (“POST” 或 “GET”)， 默認(rèn)為 “GET”。
注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。 -
url 類型：String
默認(rèn)值: 當(dāng)前頁地址。發(fā)送請求的地址。 -
async 類型：Boolean ， 默認(rèn)值: true。
默認(rèn)設(shè)置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項(xiàng)設(shè)置為 false。
注意：同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行。 -
beforeSend(XHR) 類型：Function
發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)，如添加自定義 HTTP 頭。
XMLHttpRequest 對象是唯一的參數(shù)。
這是一個 Ajax 事件。如果返回 false 可以取消本次 ajax 請求。 -
cache 類型：Boolean 默認(rèn)值: true
dataType 為 script 和 jsonp 時默認(rèn)為 false。設(shè)置為 false 將不緩存此頁面。
jQuery 1.2 新功能。 -
data 類型：String
發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。
GET 請求中將附加在 URL 后。查看 processData 選項(xiàng)說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。
如果為數(shù)組，jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉(zhuǎn)換為 ‘&foo=bar1&foo=bar2’。 -
dataType 類型：String
預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。
在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)。可用值: - “xml”: 返回 XML 文檔，可用 jQuery 處理。
- “html”: 返回純文本 HTML 信息；包含的 script 標(biāo)簽會在插入 dom 時執(zhí)行。
- “script”: 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了 “cache” 參數(shù)。
注意：在遠(yuǎn)程請求時(不在同一個域下)，所有 POST 請求都將轉(zhuǎn)為 GET 請求。（因?yàn)閷⑹褂?DOM 的 script標(biāo)簽來加載） - “json”: 返回 JSON 數(shù)據(jù) 。
- “jsonp”: JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
- “text”: 返回純文本字符串
-
success 類型：Function 這是一個 Ajax 事件。
請求成功后的回調(diào)函數(shù)。
參數(shù)：由服務(wù)器返回，并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù)；描述狀態(tài)的字符串。 -
error 類型：Function 這是一個 Ajax 事件。
默認(rèn)值: 自動判斷 (xml 或 html)。請求失敗時調(diào)用此函數(shù)。
有以下三個參數(shù)：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。
如果發(fā)生了錯誤，錯誤信息（第二個參數(shù)）除了得到 null 之外，還可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
$.ajax 使用form表單提交 —— 使用FormData對象
// 在使用 new formData() 時，在html 的表單標(biāo)簽中加入 enctype="multipart/form-data" 屬性。var formData = new FormData();formData.append('uploadPic', $("#upfile")[0].files[0]); $.ajax({url:"/submitInfor",type:"post",data:formData ,processData:false, //設(shè)置為false 是data值是FormData對象，不需要對數(shù)據(jù)做處理。contentType:false, //設(shè)置為false 是表單構(gòu)造了FormData對象，且已聲明了屬性enctype="multipart/form-data"success:function(data){console.log(data);},error:function(err){alert(err);} });上面代碼中使用 formData 對象提交數(shù)據(jù)，方便提交 文件 類型的數(shù)據(jù)。
參考文檔 ： https://www.cnblogs.com/zhuxiaojie/p/4783939.html
$.ajax 使用form表單提交 —— 使用 表單序列化
$.ajax({url:"/submitInfor",type:"post",data: $('form').serialize(), //使用表單序列化提交數(shù)據(jù)success:function(data){console.log(data);},error:function(err){alert(err);} });注意：表單里面的值只能為字符串，要提交的input標(biāo)簽中需要有 name 屬性。
當(dāng)前ajax的功能，還有許多，此處不再敘述，有興趣可以查看下面文檔：
http://www.w3school.com.cn/jquery/ajax_ajax.asp
如有什么疑問，可以在下方評論留言，一起學(xué)習(xí)！！！
在痛苦中學(xué)會成長，在學(xué)習(xí)中尋找快樂！！！
總結(jié)
以上是生活随笔為你收集整理的ajax异步请求——form表单提交 及 表单序列化提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python识别食物卡路里_请问哪里可找
- 下一篇： 【高级软考】专业术语详解