Невозможно опубликовать данные формы в API - PullRequest
Новая
       8

Невозможно опубликовать данные формы в API

0 голосов
/ 26 января 2019

У меня есть приложение, в котором мне нужно отправить данные формы в 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 всегда, казалось, распознавал запрос. Фактически, когда я тестирую мой API с помощью Postman, он всегда отвечает правильными данными. Но когда я пытаюсь создать клиент Javascript для отправки запроса, данные никогда не отображаются в консоли, как я спрашиваю. И никаких ошибок не отображается.

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Проверено со следующим.Кажется, это работает как ожидалось. 

$(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

0 голосов
/ 26 января 2019

Функция обратного вызова, которую вы передаете на первый .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))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...