Как обработать данные полученные в результате запроса из html тега form в JS?

Question

[Yukan Mukimura]

Я отправил запрос любой через html тег form, я ответ вижу как html страницу или json xml которые я вижу только в браузере.
Как мне предотвратить полное изменение html страницы ответом и обработать ответ от сервера в js?

update:

<form method="GET" action="/">
   <input type="text" name="login"/>
   <input type="submit"/>
</form>

Сервер получает {login: "login"} и предположим что ответом отправляет {login: "login", password: "randomPass"}. Пользователь который отправил запрос увидит {login: "login", password: "randomPass"} вместо формочки на сайте. Так вот мне надо чтобы на сайте не отображался ответ и js мог обработать ответ. Откуда я и кто я пожалуйста ненадо.

Comments

[rPman]

Нужно говорить какую цель ты преследуешь, а то непонятно ничего.

Ты пытаешься на чужой сайт как то добавить свой javascript стола поменять логику его работы?

Answer 1

[maksam07]

Для этого необходимо использовать технологию ajax. Перехватить обработку формы, отправить данные на сервер, к примеру, через fetch, получить ответ (или не получить) и обработать данные в нужных блоках на сайте

Некоторый пример кода можно подсмотреть тут: https://stackoverflow.com/questions/46640024/how-d...

Comments

[Yukan Mukimura]

я отправляю данные на сервер через form тег. Полученный ответ html сразу же показывает на странице. Надо чтобы небыло такого и ответ я получил в js и мог обработать его там.

[maksam07]

Yukan Mukimura, я не понял, чем отличается текущий ваш комментарий от описания вопроса. И не понял, что не так с моим комментарием.

[Алексей Ярков]

maksam07, судя по нику он японец и русский ему не родной )) Может гугл транслейт чудит ))

[maksam07]

Алексей Ярков, посмотрел его профиль - не все его сообщения осилит гугл транслейт. К примеру, такие фразы, как:

Создай приложуху

потом прикрутишь к html и js и css, если уж оч на js хочется создать

вряд ли написаны иностранцем, даже если он не плохо знает русский.

[Алексей Ярков]

maksam07, аргумент )

[Yukan Mukimura]

Алексей Ярков, вы очень помогаете разоблочить меня, русский мой не родной, но я его знаю как хорошо так как родной язык не использую особо.

[Yukan Mukimura]

maksam07, Вы советуете с помощью stopPropigation или defaultPrevent (точно не помню) остановить запрос и отправить с помощью js и потом обработать?

[maksam07]

Yukan Mukimura,

stopPropigation или defaultPrevent

preventDefault()

попробуй этот вариант, с использованием библиотеки jquery для js:

https://stackoverflow.com/a/6960586/2166371

Код довольно старый, но пока еще должен быть рабочим

[Yukan Mukimura]

ой jquery я предпочел бы не встречать его в моем пути.

[maksam07]

Yukan Mukimura, если вы по какой-то причине большой ненавистник jquery, то этот код можно использовать и в обычном js:

document.addEventListener('DOMContentLoaded', function () {

  var form = document.querySelector('#idForm');

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    var actionUrl = form.getAttribute('action');
    var formData = new FormData(form);

    fetch(actionUrl, {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Error:', error);
    });

  });

});