Javascript获取返回整个HTML页面和表单数据而不仅仅是表单数据[关闭]答案

【问题标题】：Javascript fetch returning whole HTML page and form data rather than just form data [closed]Javascript获取返回整个HTML页面和表单数据而不仅仅是表单数据[关闭]
【发布时间】：2020-06-28 23:13:51
【问题描述】：

我在使用fetch 和FormData 发布表单数据时遇到问题。我最终得到一个显示表单数据以及页面本身 HTML 的响应，如下所示。

let regForm = document.querySelector('.registration-form');
regForm.addEventListener("submit", (event) => {
  event.preventDefault();
    const formData = new FormData(event.target);
    let options = {
      method: "POST",
      body: formData
    };
    fetch('register.php', options).then((response) => {
      return response.text();
    }).then((text) => {
      console.log(text);
    }).catch((error) => {
      console.error(error);
    })
});

据我了解并拥有researched，我需要将return response.text(); 的行更改为return response.json();。当我这样做时，我收到以下错误。我不确定这是否与我的表单数据有关，或者我如何将数据发送到 PHP 文件。 如何在不获取页面的所有 HTML 的情况下从 PHP 文件中获取响应？

【问题讨论】：

这就是 AJAX 的工作方式，返回 HTTP 请求的所有输出。您可以构建一个专门的 PHP 脚本来只返回您想要的内容。你的 PHP 没有返回 JSON，所以仅仅改变返回的数据类型是行不通的。
@JayBlanchard 对我如何做到这一点有什么建议吗？
您正在寻找的是Content negotiation，您的服务器端代码会根据请求的各个方面做出不同的响应。通常，您会使用 Accepts 标头；正常请求 accept text/html 但您的 AJAX (fetch) 请求将发送 Accepts: application/json 然后您的脚本可以使用它来确定要发送的适当响应。
我们无法看到您的register.php 代码生成的文本过多。
问题最终是 php 文件本身的一些错误。在我想通之后，这很容易解决。

标签： javascript php json fetch-api

【解决方案1】：

我遇到了同样的错误，我通过使用字符串插值解决了它。在你的情况下，它会是这样的。您可以添加您拥有的所有参数。

let regForm = document.querySelector(".registration-form");
regForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  let options = {
    method: "POST",
  };
  fetch(`register.php?Register${firsname}&${surname}&${email}`, options)
    .then((response) => {
      return response.text();
    })
    .then((text) => {
      console.log(text);
    })
    .catch((error) => {
      console.error(error);
    });
});

【讨论】：