প্রতিক্রিয়া নেটিভ থেকে একটি এক্স-www-ফর্ম-urlencoded অনুরোধ পোস্ট করুন

Question 1

আমার কিছু পরামিতি রয়েছে যা আমি আমার সার্ভারে ফর্ম-এনকোড পোস্ট করতে চাই:

{
    '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
  });

আমি কীভাবে অনুরোধে ফর্ম-এনকোডেড প্যারামিটারগুলি অন্তর্ভুক্ত করতে পারি?

Question 2

ফর্ম- এনকোডযুক্ত পোষ্ট অনুরোধগুলি আপলোড করার জন্য, আমি ফর্মডাটা অবজেক্টটি ব্যবহার করার পরামর্শ দিচ্ছি ।

উদাহরণ কোড:

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);

Question 3

আপনাকে x-www-form-urlencoded পেডলোড নিজেই একসাথে রাখতে হবে:

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 (পর্যাপ্ত আধুনিক) ব্রাউজারে ব্যবহার করে থাকেন, তবে রিএকটিভ নেটিভের পরিবর্তে, আপনি এর পরিবর্তে একটি URLSearchParamsবস্তু তৈরি করতে পারেন এবং এটি শরীর হিসাবে ব্যবহার করতে পারেন, যেহেতু ফেচ স্ট্যান্ডার্ড উল্লেখ করেছে যে যদি bodyকোনও URLSearchParamsবস্তু হয় তবে এটি হিসাবে সিরিয়াল করা উচিত application/x-www-form-urlencoded। তবে, আপনি প্রতিক্রিয়া নেটিভ এ এটি করতে পারবেন না কারণ প্রতিক্রিয়া নেটিভ বাস্তবায়ন করে নাURLSearchParams ।

Question 4

ব্যবহার URLSearchParams

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

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

Question 5

আরও সহজ:

body: new URLSearchParams({
      'userName': 'test@gmail.com',
      'password': 'Password!',
      'grant_type': 'password'
    }),

দস্তাবেজ: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Question 6

স্রেফ এটি করেছে এবং আরলসন্ধানপ্যারামগুলি কৌশলটি করেছে এটি যদি আমার কাউকে সহায়তা করে তবে আমার কোডটি এখানে

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;
};

Question 7

*/ 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))
    })

এনপিএম ব্যবহারের পরে আমি কোয়েস্ট্রিটিং - সংরক্ষণ করুন এটি ঠিক আছে।

Question 8

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('http://identity.azurewebsites.net' + '/token', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: formBody
})

এটি আমার পক্ষে খুব সহায়ক এবং কোনও ত্রুটি ছাড়াই কাজ করে

পুনঃপ্রকাশ: https://gist.github.com/milon87/f391e54e64e32e1626235d4dc4d16dc8

Question 9

জাস্ট ইউজ

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))

Question 10

মূল উদাহরণে আপনার একটি transformRequestফাংশন রয়েছে যা কোনও বস্তুকে ফর্ম এনকোডড ডেটাতে রূপান্তর করে।

সংশোধিত উদাহরণে আপনি এটি প্রতিস্থাপন করেছেন JSON.stringifyযা কোন বস্তুকে JSON এ রূপান্তর করে।

উভয় ক্ষেত্রেই 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'তাই আপনি উভয় ক্ষেত্রেই ফর্ম এনকোডড ডেটা প্রেরণের দাবি করছেন।

এর পরিবর্তে আপনার ফর্ম এনকোডিং ফাংশনটি ব্যবহার করুন JSON.stringify।

আপডেট পুনরায়:

আপনার প্রথম fetchউদাহরণে, আপনি bodyJSON মান হিসাবে সেট করেছেন ।

এখন আপনি একটি ফর্ম এনকোডেড সংস্করণ তৈরি করেছেন, তবে bodyসেই মানটিকে সেট করার পরিবর্তে আপনি একটি নতুন অবজেক্ট তৈরি করেছেন এবং সেই ফর্মটির সম্পত্তি হিসাবে ফর্ম এনকোডড ডেটা সেট করেছেন।

অতিরিক্ত জিনিসটি তৈরি করবেন না। শুধু আপনার মান নির্ধারণ করুন body।

Question 11

আপনি যদি জিকিউরি ব্যবহার করেন তবে এটিও কার্যকর হয় ..

fetch(url, {
      method: 'POST', 
      body: $.param(data),
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
      }
})

Question 12

JQuery ব্যবহার করার প্রয়োজন নেই, querystringবা ম্যানুয়ালি পেডলোডটি একত্রিত করার দরকার নেই । URLSearchParamsযাওয়ার উপায় এবং এখানে সম্পূর্ণ অনুরোধ উদাহরণ সহ সর্বাধিক সংক্ষিপ্ত উত্তরগুলির মধ্যে একটি:

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
  });

হ্যাঁ, আপনি অক্ষগুলি বা তার পরিবর্তে যা কিছু ব্যবহার করতে পারেন fetch।

পিএস URLSearchParamsIE তে সমর্থিত নয়।

Question 13

মতে বৈশিষ্ট ব্যবহার encodeURIComponentআপনি একটি মানানসই কোয়েরি স্ট্রিং দেবে না। এতে বলা হয়েছে:

নাম এবং মানগুলি রক্ষা পায়। স্থান অক্ষর দ্বারা প্রতিস্থাপন করা হয়+ , এবং তারপরে সংরক্ষিত অক্ষরগুলি [আরএফসি 1738], বিভাগ ২.২ এ বর্ণিত হিসাবে পালিয়ে যায়: অ-অক্ষরীয় অক্ষর দ্বারা প্রতিস্থাপন করা হয় %HH, একটি শতাংশ চিহ্ন এবং অক্ষরের ASCII কোড উপস্থাপন করে দুটি হেক্সাডেসিমাল অঙ্ক থাকে। লাইন বিরতিগুলি "সিআর এলএফ" জোড়া হিসাবে প্রতিনিধিত্ব করে (যেমন, %0D%0A)।

নিয়ন্ত্রণের নাম / মানগুলি নথিতে প্রদর্শিত হয় সেই ক্রমে তালিকাভুক্ত করা হয়। নামটি মান দ্বারা পৃথক করা হয় =এবং নাম / মান জোড়া একে অপরের থেকে পৃথক হয় &।

সমস্যাটি হ'ল encodeURIComponentএনকোড স্পেসগুলি হ'ল %20না +।

encodeURIComponentঅন্যান্য উত্তরে দেখানো পদ্ধতির ভিন্নতা ব্যবহার করে ফর্ম-বডি কোড করা উচিত ।

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"

Question 14

আপনি প্রতিক্রিয়া-নেটিভ-সহজ-অ্যাপ্লিকেশন ব্যবহার করতে পারেন যা HTTP অনুরোধ প্রেরণ করা এবং বিরতি অনুরোধ প্রণয়ন করা সহজ।

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);
    }
});