如何在不使用 JQuery 的情況下使用 fetch API 以 JSON 格式發布表單數據？

Question

我是 Javascript 的新生，正在使用 API。作為練習的一部分，我正在構建一個帶有簡單表單的頁面來收集 email 地址。

我的頁面有四個組件——一個 HTML 表單，一個處理表單提交事件的 function，將表單數據 POST 到 JSON 的代碼，以及收集 email 的 API。

請看下面的代碼。 當我測試頁面時，它一直給我 500 個內部錯誤，我無法弄清楚是哪一部分出錯了。

1. API

我沒有這方面的代碼庫，但它的作用是使用 POST 收集 email 個地址。 POST 必須以 JSON 格式完成，並且必須具有以下兩個屬性：

{ "email": "aaa@aa.com","source": "website-name"}

2. HTML 表格

本表格僅收集email地址。

    <div class="mx-auto">
      <form class="form" name="form_head" id="form_head">
        <div class="form-row">
          <div class="mb-md-3">
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
          </div>
          <div class="md-3">
            <button type="submit" class="btn">Submit</button>
          </div>
        </div>
      </form>
    </div>

3. 拿來

    <script> // To POST form data as JSON with fetch async function postFormDataAsJson({ url, formData }) { const formDataJsonString = JSON.stringify(formData); const fetchOptions = { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json", }, body: formDataJsonString }; const response = await fetch(url, fetchOptions); if (.response.ok) { const errorMessage = await response;text(); throw new Error(errorMessage). } return response;json(); }

4. 事件處理程序 function

    // Event handler for a form submit event async function handleFormSubmit(e) { e.preventDefault(); const form = e.currentTarget; const url = /*"API url from #1"*/; try { const formData = new FormData(form); formData.append('"source"','"website-name"'); /* Instead of above, I also tried below but didn't work: const formData = { "email": `${form.name}`, "source": "website-name" } */ const responseData = await postFormDataAsJson({ url, formData }); console.log({ responseData }); } catch (error) { console.error(error); } } const formHead = document.getElementById('form_head'); formHead.addEventListener('submit', handleFormSubmit);

我覺得 #4 事件處理程序 function 中const formData = new FormData(form)的結果可能不是 Object 的正確形式，因為當我使用假 object 嘗試相同的 function 時，例如const formData = { "email": "aaa@aa.com", "source": "website-name" }該頁面按預期工作。

我個人更喜歡盡可能不使用 JQuery 來解決此問題的方法，但我們將不勝感激任何建議。 預先感謝您的意見！

Answer 1

FormData不會創建一個常規的 object，而是一個不公開其值的可迭代的 object。 您只能通過使用for...of循環或使用get()或getAll()方法從FormData實例獲取值。

因此，如果您確實需要JSON，那么您應該編寫一個幫助程序 function，它創建一個 object，循環遍歷FormData實例並將 object 中的鍵分配給它的對應值。

然后返回字符串化的結果，你得到了一些 JSON。

const formDataToJSON = formData => {
  if (!(formData instanceof FormData)) {
    throw TypeError('formData argument is not an instance of FormData');
  }

  const data = {}
  for (const [name, value] of formData) {
    data[name] = value;
  }

  return JSON.stringify(data);
}

async function postFormDataAsJson({ url, formData }) {
   const formDataJsonString = formDataToJSON(formData);
   ...

注意：當formData object 包含復雜值（如Blob或File ）時，這不起作用。

Answer 2

Formdata與JSON數據不同。 Formdata Content-type 是multipart/form-data 。 如果不需要上傳文件，就不需要Formdata，JSON就夠了