ajax傳參形式
- 2019 年 10 月 5 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/qq_37933685/article/details/85628335
title: ajax傳參形式 date: 2018-12-31 12:00:00 +0800 update: 2018-12-31 23:00:00 +0800 author: me cover: http://ww1.sinaimg.cn/large/006jIRTegy1fyqcsjhs54j31p40ye7hh.jpg preview: $.ajax()是jQuery發送非同步請求的方式，簡化了原生js的操作過程。介紹幾種參數形式 tags:
- 前端
文章目錄
- ajax傳參形式
- 介紹
- 選項詳解
- 傳參幾種形式
- URL拼接傳參
- JSON傳參
- 表單序列化傳參
- 拼接data
- 表單序列化為JSON數據傳參
- 表單序列化為JSON數據+額外參數
- 參考文章
ajax傳參形式
介紹
$.ajax()是jQuery發送非同步請求的方式，簡化了原生js的操作過程。
選項詳解
jQuery ( jQuery v1.11.2)
$.ajax({ url: "http://www.hzhuti.com", //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: { "id": "value" }, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理 request.setRequestHeader("Content-type","application/json"); request.setRequestHeader("Source","101"); request.setRequestHeader("Token","aaw--wssw-ss..."); }, success: function(data) { //請求成功時處理 }, complete: function() { //請求完成的處理 }, error: function() { //請求出錯處理 } });
格式說明： 1.參數名； 2.參數類型； 3.參數說明，默認值，可選值； url String (默認: 當前頁地址) 發送請求的地址。 type String (默認: "GET") 請求方式 ("POST" 或 "GET")， 默認為 "GET"。 注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。 timeout Number 設置請求超時時間（毫秒）。此設置將覆蓋全局設置。 async Boolean (默認: true) 默認設置下，所有請求均為非同步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 beforeSend Function 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。 function (XMLHttpRequest) { this; } cache Boolean (默認: true) jQuery 1.2 新功能，設置為 false 將不會從瀏覽器快取中載入請求資訊。 complete Function 請求完成後回調函數 (請求成功或失敗時均調用)。參數： XMLHttpRequest 對象，成功資訊字元串。 function (XMLHttpRequest, textStatus) { } contentType String (默認: "application/x-www-form-urlencoded") 發送資訊至伺服器時內容編碼類型。默認值適合大多數應用場合。 data Object,String 發送到伺服器的數據。將自動轉換為請求字元串格式。GET 請求中將附加在 URL 後。 查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。 如果為數組，jQuery 將自動為不同值對應同一個名稱。 如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。 dataType String 預期伺服器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊返回 responseXML 或 responseText，並作為回調函數參數傳遞，可用值: "xml": 返回 XML 文檔，可用 jQuery 處理。 "html": 返回純文本 HTML 資訊；包含 script 元素。 "script": 返回純文本 JavaScript 程式碼。不會自動快取結果。 "json": 返回 JSON 數據 。 "jsonp": JSONP 格式。使用 JSONP 形式調用函數時， 如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。 error Function (默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。 這個方法有三個參數：XMLHttpRequest 對象，錯誤資訊，（可能）捕獲的錯誤對象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; } global Boolean (默認: true) 是否觸發全局 AJAX 事件。 設置為 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。 可用於控制不同的Ajax事件 ifModified Boolean (默認: false) 僅在伺服器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭資訊判斷。 processData Boolean (默認: true) 默認情況下，發送的數據將被轉換為對象(技術上講並非字元串) 以配合默認內容類型 "application/x-www-form-urlencoded"。 如果要發送 DOM 樹資訊或其它不希望轉換的資訊，請設置為 false。 success Function 請求成功後回調函數。這個方法有兩個參數：伺服器返回數據，返回狀態function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... }
傳參幾種形式
URL拼接傳參
let name ="suveng"; let user="ss" $.ajax({ url: "/login/authenticate?name="+name+"&user="+user, //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: {}, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理... }, success: function(data) { //請求成功時處理... }, complete: function() { //請求完成的處理... }, error: function() { //請求出錯處理... } });
JSON傳參
let name ="suveng"; let user="ss"; var data = {"name":name,"user":user} $.ajax({ url: "/login/authenticate", //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: data, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理... }, success: function(data) { //請求成功時處理... }, complete: function() { //請求完成的處理... }, error: function() { //請求出錯處理... } });
表單序列化傳參
var params=$('#login').serialize(); //把id為login的form表單里的參數自動封裝為參數傳遞 $.ajax({ url: "/login/authenticate", //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: params, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理... }, success: function(data) { //請求成功時處理... }, complete: function() { //請求完成的處理... }, error: function() { //請求出錯處理... } });
拼接data
let name ="suveng"; let user="ss" $.ajax({ url: "/login/authenticate", //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: 'name='+name+'&user='+user, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理... }, success: function(data) { //請求成功時處理... }, complete: function() { //請求完成的處理... }, error: function() { //請求出錯處理... } });
以下傳參 需要引入：
<script type="text/javascript" src="serializeJSON.js"></script>
表單序列化為JSON數據傳參
var params=$('#login').serializeJSON(); $.ajax({ url: "/login/authenticate", //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: params, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理... }, success: function(data) { //請求成功時處理... }, complete: function() { //請求完成的處理... }, error: function() { //請求出錯處理... } });
表單序列化為JSON數據+額外參數
var params=$('#login').serializeJSON(); params.zidingyi="自定義屬性" $.ajax({ url: "/login/authenticate", //請求的url地址 dataType: "json", //返回格式為json async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性 data: params, //參數值 type: "GET", //請求方式 beforeSend: function(request) { //請求前的處理... }, success: function(data) { //請求成功時處理... }, complete: function() { //請求完成的處理... }, error: function() { //請求出錯處理... } });
參考文章
Ajax請求（$.ajax()為例）中data屬性傳參數的形式
