Как организовать выполнение запроса после нажатия кнопки?

Question

[parkito]

Здравствуйте. Помогите, пожалуйста, решить следующую проблему.
Нужно чтобы выполнялся запрос post после нажатия кнопкиsumbit, а не во время загрузки страницы.

<%@page contentType="text/html" pageEncoding="UTF-8" %>

<div id="main">
    <aside class="leftAside">
        <h2>For registration on this site</h2>
        <p>You should fill all fields bellow
    </aside>
    <section>
        <article>
            <h1>Registration</h1>
            <div class="text-article">
                <form method="POST" action="registration">
                    <p>
                        <label for="email">E-Mail</label>
                        <input type="email" name="email" id="email"/>
                    </p>
                    <p>
                        <label for="password">Password</label>
                        <input type="password" name="password" id="password"/>

                        <label for="password2">Repeat password</label>
                        <input type="password" name="password2" id="password2"/>
                    </p>
                    <p>
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name"/>
                    </p>
                    <p>
                        <label for="secondName">Second name</label>
                        <input type="text" name="login" id="secondName"/>
                    </p>
                    <p>
                        <label for="birthdayDate">Birthday date</label>
                        <input type="text" name="name" id="birthdayDate"/>
                    </p>
                    <p>
                        <label for="adress">Adress</label>
                        <input type="text" name="login" id="adress"/>
                    </p>
                    <p>
                    <p>
                        <label for="passport">Passport</label>
                        <input type="text" name="login" id="passport"/>
                    </p>
                        <button type="submit">SignUp</button>
                    </p>
                </form>
            </div>
        </article>
    </section>
</div>

Comments

[Дмитрий Кравченко]

каким образом во время загрузки выполняется пост запрос?

[parkito]

У меня написан сервелет, который ловит post запросы.

[Дмитрий Кравченко]

parkito: я имею ввиду то, что страницы грузятся методом GET. Каким образом идет POST запрос?

[parkito]

В данном случае так

[Дмитрий Кравченко]

parkito: по сабмиту формы с переходом на страницу /registration? а хочется ajax запросом, да?

[parkito]

Дмитрий Кравченко: Во фронтенде я 0. У меня на сервкаке крутится сервлет, которые обрабатывает запросы с /registration. Мне нужно, чтобы запрос приходил (а вмести с ним и его параметры) только после нажатия кнопки.

Answer 1

[Дмитрий Кравченко]

окей, анамнез собран

нужно написать обработчик сабмита формы
что-то типа:

var form = document.getElementById('form');

form.addEventListener('submit', function(e){
  e.preventDefault()//не дадим отправить форму стандартным способом
  //сделаем пост запрос руками
  var xhr = new XMLHttpRequest();
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  xhr.open("POST", form.action, true);
  //будем следить за ходом запроса
  xhr.onreadystatechange = function(){
    if (this.readyState != 4) return;
    //если пришел ответ выведем алерт (любой код сюда)
    alert( this.responseText );
  };
  //соберем данные с формы
  var body = []
  Array.prototype.forEach.call(form.elements, function(element){
    body.push(element.name+'='+encodeURIComponent(element.value))
  })
  //отправим их
  xhr.send(body.join(''));
}, false)

чтоб код сработал, нужно на форму повесить идентификатор form

Comments

[parkito]

спасибо огромное. Буду разбираться, что к чему