快捷導(dǎo)航

Postman的FormData傳參的使用示例詳解

更新時(shí)間：2023年10月31日 10:31:51 作者：慫慫敲代碼

今年上半年因?yàn)樽霎呍O(shè)的原因,有自己接觸到后端,也是用過了postman去測試接口,看到了postman那邊的參數(shù)形式,一直對(duì)這個(gè)formData有想法,今天通過本文給大家介紹Postman的FormData傳參的使用,感興趣的朋友一起看看吧

在做畢設(shè)前后端對(duì)接接口過程中，一般get或者delete請(qǐng)求我都會(huì)使用url拼接的形式，因?yàn)楦鶕?jù)restAPI格式，這兩者我基本上都是拿來獲取某個(gè)東西的詳情信息，或者刪除某個(gè)東西的詳情信息，而至于最經(jīng)常使用到的post請(qǐng)求，我一般使用的都是采取json格式的語法進(jìn)行傳參在json里前端只要傳過去對(duì)應(yīng)的對(duì)象即可，但是一直對(duì)于這個(gè)formData這個(gè)傳參方式有點(diǎn)誤解，聽名字感覺像是表單傳參過去的。

一.創(chuàng)建一個(gè)formData對(duì)象實(shí)例的方式

1、創(chuàng)建一個(gè)空對(duì)象

var formData = new FormData();//通過append方法添加數(shù)據(jù)

2、使用已有表單來初始化對(duì)象

//表單示例
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密碼
    <input type="submit" value="提交">
</form>
//方法示例
// 獲取頁面已有的一個(gè)form表單
var form = document.getElementById("myForm");
// 用表單來初始化
var formData = new FormData(form);
// 我們可以根據(jù)name來訪問表單中的字段
var name = formData.get("name"); // 獲取名字
var psw = formData.get("psw"); // 獲取密碼
// 當(dāng)然也可以在此基礎(chǔ)上，添加其他數(shù)據(jù)
formData.append("token","kshdfiwi3rh");

二. 操作方法

formData里面存儲(chǔ)的數(shù)據(jù)是以健值對(duì)的形式存在的，key是唯一的，一個(gè)key可能對(duì)應(yīng)多個(gè)value。
如果是使用表單初始化，每一個(gè)表單字段對(duì)應(yīng)一條數(shù)據(jù)，它們的HTML name屬性即為key值，它們value屬性對(duì)應(yīng)value值。

1.獲取值

//通過get(key)/getAll(key)來獲取對(duì)應(yīng)的value
formData.get("name"); // 獲取key為name的第一個(gè)值
formData.get("name"); // 返回一個(gè)數(shù)組，獲取key為name的所有值

2 添加數(shù)據(jù)

//通過append(key, value)來添加數(shù)據(jù)，如果指定的key不存在則會(huì)新增一條數(shù)據(jù)，如果key存在，則添加到數(shù)據(jù)的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");

獲取值時(shí)方式及結(jié)果如下：

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]

3.設(shè)置修改數(shù)據(jù)

//set(key, value)來設(shè)置修改數(shù)據(jù)，如果指定的key不存在則會(huì)新增一條，如果存在，則會(huì)修改對(duì)應(yīng)的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

4.判斷是否存在對(duì)應(yīng)數(shù)據(jù)

//has(key)來判斷是否對(duì)應(yīng)的key值
formData.append("k1", "v1");
formData.append("k2",null);
 
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

5.刪除數(shù)據(jù)

//delete(key)刪除數(shù)據(jù)
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
 
formData.getAll("k1"); // []

三.JQuery實(shí)例

//添加數(shù)據(jù)方式見上二。
//processData: false, contentType: false,多用來處理異步上傳二進(jìn)制文件。
 $.ajax({
    url: 'xxx',
    type: 'POST',
    data: formData,                    // 上傳formdata封裝的數(shù)據(jù)
    dataType: 'JSON',
    cache: false,                      // 不緩存
    processData: false,                // jQuery不要去處理發(fā)送的數(shù)據(jù)
    contentType: false,                // jQuery不要去設(shè)置Content-Type請(qǐng)求頭
    success:function (data) {           //成功回調(diào)
        console.log(data);
    }
});

·

/**
 * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob文件格式
 * @param urlData 用url方式表示的base64圖片
 */
function convertBase64UrlToBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]); //去掉url的頭，并轉(zhuǎn)換為byte
    //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for(var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}

以上是我對(duì)FormData的理解和使用。

到此這篇關(guān)于Postman的FormData傳參用法詳解的文章就介紹到這了,更多相關(guān)Postman的FormData傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: