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