JavaScript post Fetch API

Question

我想使用 Fetch API 發帖並從我的控制器調用一個動作，但該動作沒有像我提交帖子表單那樣被加載。

function postQuery() {
      let query = document.getElementById("query").value;

      fetch('/actionName', {
          method: 'POST',
          body: query,
          headers:
              {
                  "Content-Type": "application/x-www-form-urlencoded"
              }
      })
          .then(response => {
              console.log(response);
          })
          .then(data => {
              console.log('Success:', data);
          })
  }

/actionName 沒有被加載，我應該被定向到一個不同的頁面。

當我提交這樣的表格時：

<form action="/actionName" method="post">

公共函數 actionName 將被調用，但 fetch 不起作用。 當我嘗試在 actionName 中查看帶有 var_dump($_POST) 的 $_POST 時，我得到一個空數組......我不明白這一點

Answer 1

我在這里看到兩個問題：

1. 為什么服務器無法訪問數據
2. 為什么瀏覽器沒有重定向到 /actionName

對 #1 的回答：

確保內容類型標頭與您發送的數據匹配，如果它是原始 json，您應該使用application/json而不是application/x-www-form-urlencoded 。 如果要使用 fetch API 發送表單，則需要將表單序列化為 URL 編碼格式，或使用FormData ，例如：

var fd = new FormData(document.getElementById('myForm'))
fetch('/actionName', {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data;'
  },
  body: fd
})

對 #2 的回答：

提交 HTML 表單會將瀏覽器定向到表單action ，因此如果我向/actionName提交表單，我最終將看到服務器為該路由返回的 HTML。 使用 Fetch API 提交表單是一種 AJAX，這意味着它能夠與服務器通信而無需加載新頁面。

考慮到這一點，您有幾個選擇：

• 使用常規形式，以便發生所需的默認行為
• 在獲取承諾解析后手動將用戶重定向到某個地方，例如：

fetch(/*..*/).then(data => {
  console.log('Success:', data);
  window.location.href = '/otherPage'
})

• 在不重定向用戶的情況下呈現響應 HTML，例如：

fetch(/*..*/).then(data => {
  console.log('Success:', data);
  data.text().then(rawHTML => {
    document.body.parentElement.innerHTML = rawHTML
  })
})

我個人的直覺是選擇第一個選項，因為它適合您的要求並且是最簡單的。