私は自分のサーバーにフォーム・エンコードを投稿したいいくつかのパラメータを持つネイティブ

Question

に反応からポストx-www-form-urlencodedで要求：

{ 
    'userName': 'test@gmail.com', 
    'password': 'Password!', 
    'grant_type': 'password' 
} 

私は（現在はパラメータなし）私の要求を送信していますこのように

var obj = { 
    method: 'POST', 
    headers: { 
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
    }, 
}; 
fetch('https://example.com/login', obj) 
    .then(function(res) { 
    // Do stuff with result 
    }); 

リクエストにフォームエンコードされたパラメータを含めるにはどうすればよいですか？

Answer 1

フォームエンコードされたPOSTリクエストをアップロードする場合は、FormDataオブジェクトの使用をお勧めします。

コード例：あなたはこのように、一緒にx-www-form-urlencodedでペイロード自分自身を配置する必要があり

var params = { 
    userName: 'test@gmail.com', 
    password: 'Password!', 
    grant_type: 'password' 
}; 

var formData = new FormData(); 

for (var k in params) { 
    formData.append(k, params[k]); 
} 

var request = { 
    method: 'POST', 
    headers: headers, 
    body: formData 
}; 

fetch(url, request); 

Answer 2

元の例では、オブジェクトをフォームエンコードされたデータに変換するtransformRequest関数があります。

改訂例では、オブジェクトをJSONに変換するJSON.stringifyに置き換えました。

どちらの場合も、'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'がありますので、と書いてと書いて、どちらの場合でもエンコードされたデータを送信してください。

JSON.stringifyの代わりにフォームエンコード関数を使用してください。

---

再更新：

あなたの最初のfetchの例では、JSONの値にbodyを設定します。

フォームエンコードされたバージョンを作成しましたが、bodyをその値に設定する代わりに、新しいオブジェクトを作成し、そのオブジェクトのプロパティとしてフォームエンコードされたデータを設定しています。

余分なオブジェクトを作成しないでください。値をbodyに割り当ててください。

Answer 3

：

var details = { 
    'userName': 'test@gmail.com', 
    'password': 'Password!', 
    'grant_type': 'password' 
}; 

var formBody = []; 
for (var property in details) { 
    var encodedKey = encodeURIComponent(property); 
    var encodedValue = encodeURIComponent(details[property]); 
    formBody.push(encodedKey + "=" + encodedValue); 
} 
formBody = formBody.join("&"); 

fetch('https://example.com/login', { 
    method: 'POST', 
    headers: { 
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' 
    }, 
    body: formBody 
}) 

（注）でfetchを使用していた場合にReact Nativeの代わりに（十分に現代的な）ブラウザでは、代わりにオブジェクトを作成し、それを本体として使用することができます。Fetch Standard statesの場合、bodyがURLSearchParamsオブジェクトの場合は、application/x-www-form-urlencodedとしてシリアル化する必要があります。ただし、React Native does not implement URLSearchParamsが原因でReact Nativeでこれを行うことはできません。

Answer 4

使用URLSearchParams

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var data = new URLSearchParams(); 
data.append('userName', 'test@gmail.com'); 
data.append('password', 'Password'); 
data.append('grant_type', 'password'); 

Answer 5

あなたはもっと簡単にJSONをシリアル化できるように、あなたは、オブジェクトに機能を追加することができます。

Object.prototype.serialize = function() { 
    if (!this) return; 

    var s = [] 

    for (var key in this) { 
    if (this.hasOwnProperty(key)) { 
     s.push(encodeURIComponent(key) + '=' + encodeURIComponent(this[key])) 
    } 
    } 

    return s.join('&') 
} 

すると、そのを使用するには、単に例えば

obj.serialize() 

記述する必要があります。

var data = { 
    a: 1, 
    b: 2, 
    c: true 
} 

fetch('/api_url', { 
    method: 'POST', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    body: data.serialize() // see the usage here 
})