无法将表单数据发布到 API答案

【问题标题】：Cannot post form data to API无法将表单数据发布到 API
【发布时间】：2019-06-20 03:38:59
【问题描述】：

我有一个需要向 API 提交表单数据的应用。无论我使用 JQuery、Axios 还是 Fetch，无论我请求什么 API，无论哪个客户端正在执行请求，它都不起作用。我决定使用 Typicode JSONPlaceholder 从头开始，复制粘贴大部分他们自己的示例代码，但我仍然无法查询该死的 API。有人请指出一些事情。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Post Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>    
    <script>
        $(() => {
            $('button').on('click', () => {
                let formData = {
                    title: $('#title').val(),
                    body: $('#body').val(),
                    userId: 0
                };
                fetch('https://jsonplaceholder.typicode.com/posts', {
                    method: 'POST',
                    body: JSON.stringify(formData),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                })
                .then(response => 
                {
                    response.json()
                })
                .then(json => console.log(json))
            });
        });
    </script>
</head>
<body>
    <form>
        <input placeholder="Title" id="title" />
        <textarea placeholder="Body" id="body" rows="4" cols="12"></textarea>
        <button>Submit</button>
    </form>

</body>
</html>

已编辑以获取更多信息：JQuery 似乎正在选择元素，并将它们的值保存到 formData 对象。调试器向我保证这一点。而且我很确定服务器正在接收浏览器的请求。我不能代表 JSONPlaceholder 服务器，但是当我使用自己的服务器时，API 似乎总是能识别请求。事实上，当我使用 Postman 测试我的 API 时，它总是以正确的数据进行响应。但是当我尝试构建一个 Javascript 客户端来发送请求时，数据永远不会像我问的那样显示在控制台中。并且没有显示错误。

【问题讨论】：

浏览器的开发控制台有错误吗？调试时会发生什么？代码是否按预期执行？ jQuery 选择器能找到您期望的元素吗？ formData 有你所期待的吗？是否发出了 AJAX 请求？服务器的响应是什么？
元素被选中，并保存到 formData 对象中。调试器向我保证这一点。我不能代表 JSONPlaceholder 服务器，但是当我使用自己的服务器时，API 似乎可以识别请求。事实上，当我使用 Postman 测试我的 API 时，它总是以正确的数据进行响应。但是当我尝试构建一个 Javascript 客户端来发送请求时，数据永远不会显示在控制台中。并且没有显示错误。
请注意，“无法查询 API”和“无法显示我从 API 返回的数据”是两个非常不同的东西。如果您成功查询 API 而只是不显示数据，那么下面的答案似乎应该可以解决您的问题。

标签： javascript jquery fetch-api

【解决方案1】：

传递给第一个.then 调用的回调函数不返回任何内容

.then(response => {
    response.json()
})

将其更改为.then(response => response.json()) 或.then(response => {return response.json()})，它应该可以工作。

let formData = {
    title: "title",
    body: "body",
    userId: 0
};
fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(formData),
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }
})
.then(response => 
{
    return response.json()
})
.then(json => console.log("response",json))

【讨论】：

@L.C.J 是的，我已经测试过了，它可以工作。请参阅我添加到答案中的片段。

【解决方案2】：

经过以下测试。这似乎按预期工作。

$(function() {
  $('button').click(function(e) {
    var myData = {
      title: $('#title').val(),
      body: $('#body').val(),
      userId: 1
    };
    fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify(myData),
        headers: {
          "Content-type": "application/json; charset=UTF-8"
        }
      })
      .then(response => response.json())
      .then(json => console.log(json));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h3>Add Item</h3>
<label>Title</label> <input type="text" id="title" /><br/>
<label>Body</label>
<textarea id="body"></textarea><br/>
<button>Send</button>

【讨论】：