Jquery 以及AngularJS 中 Get/Post 傳參筆記

HackerShell 發布于2019-08-22 17:14 / 2813人閱讀

摘要：傳參并不是很難的事，但有時牽扯到例如要傳一個對象或者到后端的時候就會有些麻煩，在這里總結一些使用方法。在中可以通過設定來解決在中就比較難設定，參見錯誤之處或者更多方案歡迎提出，謝謝

傳參并不是很難的事，但有時牽扯到例如要傳一個對象或者form到后端的時候就會有些麻煩，在這里總結一些使用方法。

首先先介紹發送請求時我們經常會混淆的幾個屬性：
dataType: 期待服務器返回的數據格式
mimeType: 告訴說如何處理服務器返回的數據格式，這樣browser就會進行相應的處理, 例如，設定類型為"Text/html"，那么client端就知道說，這是一個HTML的文檔，我直接呈現出來就可以了；如果說是“Application/pdf”，那么client端就會知道說需要啟動PDF閱讀器插件去呈現內容。
contentType：是指你所要發送的數據類型，例如“application/json;charset=utf-8”就是很常見的類型，而“application/x-www-form-urlencoded; charset=UTF-8”是默認類型。

另外，比較一下Request Payload和Form的方式有何區別：
Request Payload需要設定Content-Type:application/json
在chrome developer tool里你會看到他傳遞的是一個Object/json，注意到里面還包含了數組，假如你是通過ajax提交的請求，瀏覽器只是顯示出你通過Payload body提交的內容，瀏覽器并不知道資料是從哪里來的

Form形式的需要設定Content-Type: application/x-www-form-urlencoded 或者 Content-Type: multipart/form-data，通過developer tool看到的是這樣的，這種情況下form-data就是Request payload，瀏覽器知道什么鍵對應什么值，所以他是以xx=xx的形式展現的，要注意的是，數組被轉成了字串。

因此，當你需要傳的資料僅僅是鍵值對，用Form的形式足以，如果需要傳遞的是復雜結構的（例如有嵌套的數組，對象），用RequestPayload比較合適。

接下來讓我們比較一下各種傳參情況~

第一種情況，傳普通字串
JQuery:

let params = {
    a: 1,
    b: 2
}
// 第一種方法:
$.ajax({
        "dataType": "json",
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二種方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS:

var conf = {
    method: "GET",
    url: "your_request",
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

第二種情況：Post form data
JQuery:

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS:
注意data需要被轉換成URL-encoded字串
ContentType需要設定為"application/x-www-form-urlencoded"指定傳送的數據格式為Form

var conf = {
    method: "POST",
    url: "your_request",
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {"Content-Type": "application/x-www-form-urlencoded"}
};

第三種情況：使用RequestPayload進行Post參數
JQuery:
設定contentType為“application/json”,并且將params序列化

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

AngularJS:

var conf = {
    method: "POST",
    url: "your_request",
    data: {
        c: 3,
        d: 4
    }
};

有時，當服務器返回response是null，在火狐里會出現xml解析錯誤，是因為火狐默認使用xml解析服務器返回值，而遇到null返回值時，發生了解析錯誤。
在JQuery中可以通過設定mimeType來解決

$.ajax({
        "dataType": "json",
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
})

在AngularJS中就比較難設定mimeType，參見：https://github.com/angular/an...

錯誤之處或者更多方案歡迎提出，謝謝！

GPU云服務器云服務器 get post jquery學習筆記 java中接口傳參 php中jquery

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94979.html

AJAX跨域、使用formdata傳輸文件(傳輸截圖后的文件)、angularJS跨域

A網站訪問B網站這就是跨域當你調用接口時，F12控制臺拋出這狀態時，你就跨域了（圖示） showImg(https://segmentfault.com/img/bVE8yG?w=867&h=44); 如何解決跨域呢？解決的幾種方法（我現在只用到了這兩種） JSONP 讓后臺的小伙伴設置header：如PHP的 header{Access-Control-Allow-Origin: *} ...

陳偉 2019-08-20 12:02 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調用封裝的方法，簡化操作傳統方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
angularjs+springMvc學習筆記

摘要：回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數和，下面的方法請求成功執行，失敗執行異步異步的原理我看了網上的一些博客和例子，大都以定時任務為例子說明，但具體的原理我還是不太回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數success和error，下...

dreamGong 2019-08-23 11:59 評論0 收藏0
angularjs+springMvc學習筆記

摘要：回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數和，下面的方法請求成功執行，失敗執行異步異步的原理我看了網上的一些博客和例子，大都以定時任務為例子說明，但具體的原理我還是不太回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數success和error，下...

rozbo 2019-08-19 11:10 評論0 收藏0
Ajax詳解

摘要：當請求完成后注冊一個回調函數。該請求是否觸發全局處理事件如等，請求發送前的回調函數，用來修改請求發送前，此功能可用來設置自定義頭信息，在函數中返回將取消這個請求。例如，為請求指定一個回調函數名。即改變回調函數的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現客...

jokester 2019-08-23 14:15 評論0 收藏0