Ich habe einige Parameter, die ich formularcodiert auf meinen Server POSTEN möchte:
{
'userName': '[email protected]',
'password': 'Password!',
'grant_type': 'password'
}
Ich sende meine Anfrage (derzeit ohne Parameter) so
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
});
Wie kann ich die formularcodierten Parameter in die Anfrage aufnehmen?
javascript
http-post
react-native
fetch-api
texas697
quelle
quelle
Antworten:
Zum Hochladen formularcodierter POST-Anforderungen empfehle ich die Verwendung des FormData- Objekts.
Beispielcode:
var params = { userName: '[email protected]', 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);
quelle
application/x-www-form-urlencoded
, nichtmultipart/form-data
.Sie müssen die x-www-form-urlencodierte Nutzlast selbst wie folgt zusammenstellen:
var details = { 'userName': '[email protected]', '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 })
Beachten Sie, dass , wenn Sie mit waren
fetch
in einem (ausreichend modern) Browser, anstelle von nativem Reagieren Sie stattdessen ein schaffen könntenURLSearchParams
Objekt und verwenden , die als der Körper, da die Standard - Fetch besagt , dass , wenn diebody
a -URLSearchParams
Objekt dann sollte es als serialisiert werdenapplication/x-www-form-urlencoded
. In React Native ist dies jedoch nicht möglich,URLSearchParams
da React Native nicht implementiert ist .quelle
const formBody = Object.keys(details).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(details[key])).join('&');
const formBody = Object.entries(details).map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value)).join('&')
Verwenden
URLSearchParams
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
var data = new URLSearchParams(); data.append('userName', '[email protected]'); data.append('password', 'Password'); data.append('grant_type', 'password');
quelle
URLSearchParams
existiert nicht in React Native. (Siehe github.com/facebook/react-native/issues/9596. )toString()
die Daten unbedingt auf, bevor Sie die Anforderung weiterleitenbody
.URLSearchParams
, habe ich immer noch Probleme. Ich denke nicht, dass es in Übereinstimmung mit der Spezifikation implementiert ist und es ist nicht nur ein Drop-in-Lösung. Bitte lesen Sie URLSearchParams 'Fehler: nicht implementiert', wenn Sie versuchen, vorbeizuschauenURLSearchParams
und weiterhin Probleme haben.Noch einfacher:
body: new URLSearchParams({ 'userName': '[email protected]', 'password': 'Password!', 'grant_type': 'password' }),
Dokumente: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
quelle
Hab das gerade gemacht und UrlSearchParams hat den Trick gemacht Hier ist mein Code, wenn er jemandem hilft
import 'url-search-params-polyfill'; const userLogsInOptions = (username, password) => { // const formData = new FormData(); const formData = new URLSearchParams(); formData.append('grant_type', 'password'); formData.append('client_id', 'entrance-app'); formData.append('username', username); formData.append('password', password); return ( { method: 'POST', headers: { // "Content-Type": "application/json; charset=utf-8", "Content-Type": "application/x-www-form-urlencoded", }, body: formData.toString(), json: true, } ); }; const getUserUnlockToken = async (username, password) => { const userLoginUri = `${scheme}://${host}/auth/realms/${realm}/protocol/openid-connect/token`; const response = await fetch( userLoginUri, userLogsInOptions(username, password), ); const responseJson = await response.json(); console.log('acces_token ', responseJson.access_token); if (responseJson.error) { console.error('error ', responseJson.error); } console.log('json ', responseJson); return responseJson.access_token; };
quelle
*/ import this statement */ import qs from 'querystring' fetch("*your url*", { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: qs.stringify({ username: "akshita", password: "123456", }) }).then((response) => response.json()) .then((responseData) => { alert(JSON.stringify(responseData)) })
Nach der Verwendung von npm frage ich ab - speichern Sie es funktioniert gut.
quelle
var details = { 'userName': '[email protected]', '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('http://identity.azurewebsites.net' + '/token', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' }, body: formBody })
es ist so hilfreich für mich und funktioniert ohne Fehler
Aktualisierung: https://gist.github.com/milon87/f391e54e64e32e1626235d4dc4d16dc8
quelle
Benutz einfach
import qs from "qs"; let data = { 'profileId': this.props.screenProps[0], 'accountId': this.props.screenProps[1], 'accessToken': this.props.screenProps[2], 'itemId': this.itemId }; return axios.post(METHOD_WALL_GET, qs.stringify(data))
quelle
Im ursprünglichen Beispiel haben Sie eine
transformRequest
Funktion, die ein Objekt in formularcodierte Daten konvertiert.Im überarbeiteten Beispiel haben Sie das ersetzt, durch
JSON.stringify
das ein Objekt in JSON konvertiert wird.In beiden Fällen haben Sie
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
so dass Sie behaupten , in beiden Fällen Formulare codierte Daten zu senden.Verwenden Sie stattdessen Ihre Formularcodierungsfunktion
JSON.stringify
.Neu aktualisieren:
In Ihrem ersten
fetch
Beispiel legen Siebody
den Wert als JSON fest.Jetzt haben Sie eine formularcodierte Version erstellt, aber anstatt
body
diesen Wert festzulegen, haben Sie ein neues Objekt erstellt und die formularcodierten Daten als Eigenschaft dieses Objekts festgelegt.Erstellen Sie dieses zusätzliche Objekt nicht. Weisen Sie einfach Ihren Wert zu
body
.quelle
Wenn Sie JQuery verwenden, funktioniert dies auch.
fetch(url, { method: 'POST', body: $.param(data), headers:{ 'Content-Type': 'application/x-www-form-urlencoded' } })
quelle
Sie müssen jQuery nicht verwenden
querystring
oder die Nutzdaten manuell zusammenstellen.URLSearchParams
ist ein langer Weg und hier ist eine der prägnantesten Antworten mit dem vollständigen Anforderungsbeispiel:fetch('https://example.com/login', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ 'param': 'Some value', 'another_param': 'Another value' }) }) .then(res => { // Do stuff with the result });
Ja, Sie können stattdessen Axios oder was auch immer Sie wollen verwenden
fetch
.PS
URLSearchParams
wird im IE nicht unterstützt.quelle
Gemäß der Spezifikation erhalten Sie bei Verwendung
encodeURIComponent
keine konforme Abfragezeichenfolge. Es sagt aus:Das Problem ist,
encodeURIComponent
codiert Leerzeichen%20
nicht+
.Der Formkörper sollte unter Verwendung einer Variation der
encodeURIComponent
in den anderen Antworten gezeigten Methoden codiert werden .const formUrlEncode = str => { return str.replace(/[^\d\w]/g, char => { return char === " " ? "+" : encodeURIComponent(char); }) } const data = {foo: "bar߃©˙∑ baz", boom: "pow"}; const dataPairs = Object.keys(data).map( key => { const val = data[key]; return (formUrlEncode(key) + "=" + formUrlEncode(val)); }).join("&"); // dataPairs is "foo=bar%C3%9F%C6%92%C2%A9%CB%99%E2%88%91++baz&boom=pow"
quelle
Sie können die React-Native-Easy-App verwenden , mit der sich HTTP-Anfragen einfacher senden und Abfanganfragen formulieren lassen.
import { XHttp } from 'react-native-easy-app'; * Synchronous request const params = {name:'rufeng',age:20} const response = await XHttp().url(url).param(params).formEncoded().execute('GET'); const {success, json, message, status} = response; * Asynchronous requests XHttp().url(url).param(params).formEncoded().get((success, json, message, status)=>{ if (success){ this.setState({content: JSON.stringify(json)}); } else { showToast(msg); } });
quelle