Question

我有一个应用程序，需要将表单数据提交给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客户端来发送请求时，数据从未像我要求的那样显示在控制台中。并且没有错误显示。

Answer 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))

Answer 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>

更多详情，请访问https://github.com/typicode/jsonplaceholder

无法将表单数据发布到API

2 个答案: