Javascript извлечение данных добавления к HTML перезаписанному - PullRequest
Новая
       7

Javascript извлечение данных добавления к HTML перезаписанному

0 голосов
/ 24 марта 2020

Довольно новый для Javascript. У меня есть форма HTML с атрибутом onsubmit , равным моей функции JavaScript getResponse (). В функции getResponse () я делаю выборку (POST) для получения данных из моего API. Я хочу добавить данные на страницу, чтобы пользователь мог их видеть, однако кажется, что они стираются с экрана в течение миллисекунд после их появления на экране.

Моя функция getResponse (): 

fetch('/', {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
        },
})
        .then(json)
        .then(function (data) {
            $(".formResponse").append(`<p>Response: ${data.user}`)
        })
        .then(function (error) {
            console.error(error);
        });

Это похоже на ситуацию, если я сохраню данные в консоли, они исчезнут, если я не "сохраню" журнал в инструментах разработки. Есть предложения, что я тут не так делаю?

Ответы [ 2 ]

3 голосов
/ 24 марта 2020

Вам необходимо запретить поведение отправки формы по умолчанию. Вы можете сделать это, вызвав preventDefault() для события, переданного из onsubmit: 

 function getResponse(event) {
     // Prevent the default behavior of the form submitting.
     event.preventDefault()

     fetch('/', {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
        },
})
        .then(json)
        .then(function (data) {
            $(".formResponse").append(`<p>Response: ${data.user}`)
        })
        .then(function (error) {
            console.error(error);
        });
 }

<form> onsubmit передается аргумент event, поэтому вы должны выполнить следующие действия: Ваша форма: 

<form onsubmit="getResponse(event);"></form>
0 голосов
/ 24 марта 2020

Я не могу понять из этого кода, почему данные исчезнут.

Вы должны использовать метод GET для получения данных. POST используется для создания записи или сохранения чего-либо.

Методы CRUD, связанные с запросами http, следующие:

GET / RETRIEVE - для получения данных с удаленного сервера. Как «Открыть». POST / CREATE - сохранить или создать данные в базе данных. Как «Сохранить как». PUT / UPDATE - обновить или сохранить дополнительные данные в уже существующей записи. Как «Сохранить». DELETE / DESTROY - удалить запись.

Если это не сработает, возможно, вам придется добавить еще немного кода, чтобы мы могли видеть, что происходит.

...