আনার জন্য এপিআই দিয়ে আমি কীভাবে ফর্ম ডেটা পোস্ট করব?

116

আমার কোড:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

আমি আনার এপিআই ব্যবহার করে আমার ফর্মটি পোস্ট করার চেষ্টা করেছি এবং এটি যে শরীরটি প্রেরণ করে তা হ'ল:

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(আমি জানি না কেন প্রতি বার পাঠানোর সময় সীমানায় নম্বর পরিবর্তন করা হয় ...)

আমি এটি "সামগ্রী-প্রকার" দিয়ে ডেটা প্রেরণ করতে চাই: "অ্যাপ্লিকেশন / x-www-form-urlencoded", আমার কী করা উচিত? বা যদি আমাকে কেবল এটির মোকাবিলা করতে হয় তবে আমি কীভাবে আমার নিয়ামকের ডেটা ডিকোড করব?

যাদের কাছে আমার প্রশ্নের উত্তর, আমি জানি আমি এটি দিয়ে এটি করতে পারি:

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

আমি যা চাই তা হ'ল $ ("# ফর্ম") এর মত। যদিও আপনার উত্তরগুলির জন্য ধন্যবাদ।

javascript ajax fetch-api

— জ্যাক
সূত্র

ব্যবহারে সমস্যা কি FormData?

— অতিথি 271314

1

আমি এটি "email=test@example.com&password=pw" হিসাবে পোস্ট করতে চাই। এটা কি সম্ভব?

— জ্যাক

1

"আমি জানি না কেন প্রতি বার যখন পাঠানো হয় তখন কেন সীমানায় নম্বরটি পরিবর্তন করা হয় ..." - সীমানা শনাক্তকারী কেবল একটি এলোমেলো শনাক্তকারী, এটি কিছু হতে পারে এবং এর নিজস্ব কোনও অর্থ নেই have সুতরাং সেখানে একটি এলোমেলো সংখ্যা বেছে নেওয়ার ক্ষেত্রে কোনও ভুল নেই (যা ক্লায়েন্টরা সাধারণত তাই করে)।

— অকর্মা

149

এমডিএনFormData (জোর খনি) এর উদ্ধৃতি দিতে :

FormDataইন্টারফেস একটি উপায় সহজে ফর্ম ক্ষেত্রগুলি এবং তাদের মূল্যবোধ, যা পরে সহজে ব্যবহার পাঠানো যেতে পারে প্রতিনিধিত্বমূলক কী / মান জোড়া একটি সেট গঠন করা উপলব্ধ XMLHttpRequest.send()পদ্ধতি। যদি এনকোডিংয়ের ধরণটি সেট করা থাকে তবে এটি কোনও ফর্ম ব্যবহার করবে একই ফর্ম্যাটটি ব্যবহার করে"multipart/form-data" ।

তাই ব্যবহার করার সময় FormDataআপনি নিজেকে লক করছেন multipart/form-data। একটি পাঠাতে কোনো উপায় নেই FormDataশরীরের হিসাবে বস্তু এবং না ডেটা পাঠানোর multipart/form-dataবিন্যাস।

আপনি যদি ডেটা প্রেরণ করতে চান তবে আপনাকে application/x-www-form-urlencodedশরীরের URL- এনকোডড স্ট্রিং হিসাবে নির্দিষ্ট করতে হবে, বা কোনও URLSearchParamsবস্তু পাস করতে হবে । পরে দুর্ভাগ্যক্রমে কোনও formউপাদান থেকে সরাসরি আরম্ভ করা যায় না । আপনি যদি নিজের ফর্মের উপাদানগুলি নিজেই (যা আপনি ব্যবহার করতে পারেন HTMLFormElement.elements) এর মাধ্যমে পুনরাবৃত্তি করতে না চান , আপনি কোনও URLSearchParamsবস্তু থেকে একটি FormDataবস্তুও তৈরি করতে পারেন :

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

মনে রাখবেন আপনার Content-Typeনিজের একটি শিরোনাম নির্দিষ্ট করার দরকার নেই ।

মন্তব্যে সন্ন্যাস-সময়ের দ্বারা উল্লিখিত হিসাবে , আপনি কোনও লুপে মানগুলি সংযোজন করার পরিবর্তে অবজেক্টটি সরাসরি তৈরি URLSearchParamsএবং পাস করতে পারেন FormData:

const data = new URLSearchParams(new FormData(formElement));

এটির ব্রাউজারগুলিতে এখনও কিছু পরীক্ষামূলক সমর্থন রয়েছে, সুতরাং এটি ব্যবহার করার আগে এটি সঠিকভাবে পরীক্ষা করে নেওয়ার বিষয়টি নিশ্চিত করুন।

— অকর্মা
সূত্র

18

আপনি FormDataসরাসরি কোনও লুপের পরিবর্তে কোনও অবজেক্ট বা কেবল নির্মাণকারীতেও ব্যবহার করতে পারেন :new URLSearchParams(new FormData(formElement))

— সন্ন্যাস-সময়

@ সন্ন্যাসী-টাইম যে উত্তর লেখার সময়ে, কন্সট্রাকটর যুক্তি URLSearchParamsছিল খুব নতুন এবং খুব সীমিত সমর্থন।

— অকর্মা

3

দুঃখিত, এটি কোনও অভিযোগ ছিল না, ভবিষ্যতে এটি পড়বে এমন প্রত্যেকের কাছে কেবল একটি নোট।

— সন্ন্যাস-সময়

1

@ প্রসন্ত আপনি বিষয়বস্তুর প্রকারটি স্পষ্টভাবে উল্লেখ করতে পারেন তবে আপনাকে সঠিকটি বেছে নিতে হবে । এটি কেবল ছেড়ে দেওয়া আপনার পক্ষে fetchযত্ন নেওয়া সহজ ।

— অকর্মা

1

@ শেভি URLSearchParamsবেশিরভাগ আধুনিক ব্রাউজারগুলিতে গ্লোবাল অবজেক্ট হিসাবে নির্মিত এবং নোড থেকেও কাজ করে।

— অকর্মা

67

মক্কেল

কন্টেন্ট-টাইপ শিরোনাম সেট করবেন না।

// Build formData object.
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

সার্ভার

FromFormবাঁধার উত্সটি ফর্ম ডেটা উল্লেখ করার জন্য বৈশিষ্ট্যটি ব্যবহার করুন ।

[Route("api/[controller]")]
public class SampleDataController : Controller
{
    [HttpPost]
    public IActionResult Create([FromForm]UserDto dto)
    {
        return Ok();
    }
}

public class UserDto
{
    public string Name { get; set; }
    public string Password { get; set; }
}

— regnauld
সূত্র

4

এটি যখন কাজ করে, এটি application/x-www-form-urlencodedওপি যা যা জিজ্ঞাসা করে তা ডেটা প্রেরণ করে না ।

— অকর্মা

5

আমার জন্য, যখন আমি শিরোনামটি Content-Type থেকে সরানো হয়েছিল এবং ব্রাউজারটি স্বয়ংক্রিয়ভাবে এটি করতে দেয় তখন এটি কাজ করেছিল। ধন্যবাদ!

— ক্রিস

ধন্যবাদ @regnauld সারা দিন এটি চেষ্টা করে চলেছে!

— ak85

1

যদি আপনি আনার জন্য 'বিষয়বস্তু-টাইপ' সেট না করেন multipart/form-data, তবে এটি এটির মতো সেট করবে , যা ফর্ম ডেটার জন্য এটি হওয়া উচিত! তারপরে আপনি multerসহজেই ডেটা ফর্ম্যাটটি পার্স করতে এক্সপ্রেসগুলিতে ব্যবহার করতে পারেন।

— kyw

23

আপনি কোয়েরি স্ট্রিং যুক্তিরূপে পাস হয়ে bodyএকটি উদাহরণে সেট করতে পারেনURLSearchParams

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("email=test@example.com&password=pw")
})

document.forms[0].onsubmit = async(e) => {
  e.preventDefault();
  const params = new URLSearchParams([...new FormData(e.target).entries()]);
  // fetch("/path/to/server", {method:"POST", body:params})
  const response = await new Response(params).text();
  console.log(response);
}

<form>
  <input name="email" value="test@example.com">
  <input name="password" value="pw">
  <input type="submit">
</form>

স্নিপেট প্রসারিত করুন

— guest271314
সূত্র

2

Reflect.apply(params.set, params, props)বলার একটি বিশেষভাবে অপঠনযোগ্য উপায় params.set(props[0], props[1])।

— অকর্মা

@ পোকে Reflect.apply(params.set, params, props)এখানে দৃষ্টিভঙ্গি থেকে পঠনযোগ্য।

— অতিথি 271314

এটি এখানে একমাত্র কার্যকরী উত্তর বলে মনে হচ্ছে: / আপনাকে ধন্যবাদ! :)

— ওজজিআই

0

ব্যবহার FormDataএবং fetchডেটা দখল এবং প্রেরণ

কোড স্নিপেট দেখান

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We send post asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)">
    <input hidden name="crsfToken" value="a1e24s1">
    <input name="email" value="a@b.com">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

Look on chrome console>network before/after 'submit'

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র

0

function card(fileUri) {
let body = new FormData();
let formData = new FormData();
formData.append('file', fileUri);

fetch("http://X.X.X.X:PORT/upload",
  {
      body: formData,
      method: "post"
  });
 }

— স্যুফিয়ান এলামমারী
সূত্র

7

তারা কীভাবে এবং কেন কাজ করে তার কিছু ব্যাখ্যা যুক্ত করে কেবলমাত্র উত্তরগুলির কোডগুলি উন্নত করা যায়। বিদ্যমান উত্তরগুলির সাথে একটি দুই বছরের পুরানো প্রশ্নের উত্তর যুক্ত করার সময় আপনার উত্তরটির প্রশ্নের নতুন দিকটি কী যুক্ত করে তা উল্লেখ করা গুরুত্বপূর্ণ point

— জেসন অ্যালার