0

В случае успешного выполнения XMLHttpRequest запроса в сервлет нужно на странице вывести сообщение "Студент добавлен в базу данных".

Проблема: перезагружается страница, сообщение остается на странице до перезагрузки и его не видно. Нужно чтобы высветилось сообщение, при этом обновилась не вся страница, а только форма(в идеале) либо форма спряталась,т.к. если ее оставить в предыдущем состоянии при повторном нажатии submit те же данные введутся снова.

add.jsp:

<h1 id='result'></h1> //выводится сообщение о результате
<h2>Add student</h2>
<form>
    <input type = "text" id="firstname" name="firstname"><br>
    <input type = "text" id="secondname" name="secondname"><br>
    <input type="submit" id="button" value="Add student" onclick="add()">
</form>

js:

 function add() {
        var xhr = new XMLHttpRequest();
        var fname = document.getElementById("firstname").value;
        var surname = document.getElementById("secondname").value;
        var button = document.getElementById("button").value;
        dat = "firstname="+encodeURIComponent(firstname)+"&secondname="+encodeURIComponent(secondname)+"&button="+encodeURIComponent(button);   
        xhr.open('POST', 'servlet', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send(dat); 
        xhr.onload = function () { 
           var response = xhr.responseText;
           document.getElementById("result").innerHTML = response;
    };
}

сервлет:

  public void doPost(HttpServletRequest request, HttpServletResponse response){
      if(request.getParameter("button".equals("Add student")){
          if(request.getParameter("firstname").matches("[A-Za-z]{2,}") && request.getParameter("secondname").matches("[A-Za-z]{2,}")) {
                studentDao.create(new Student(0, request.getParameter("firstname"), request.getParameter("secondname")));
                response.getWriter().write("Student successfully added to the Database!"); //нужно вывести это сообщение на страницу
            } else {
                response.getWriter().write("Student has not been added to the Database, input correct data!"); //это сообщение в случае неудачи успешно выводится
            }
      }
}

2 ответа 2

2
<h1 id='result'></h1> //выводится сообщение о результате
<h2>Add student</h2>
<form name='form1'>
    <input type = "text" id="firstname" name="firstname"><br>
    <input type = "text" id="secondname" name="secondname"><br>
    <input type="submit" id="button" value="Add student" onsubmit="add()">
</form>

function add(e) {
e.preventDefault();

если кнопка находится непосредственно в форме

e.target.parentNode.reset();

если форме указать имя form1

document.forms.form1.reset();

// ваш код
}
3
  • при event.preventDefault() страница не перегрузится, но к сожалению и форма останется прежней с введенными данными и при нажатии button те же данные добавятся снова 18 авг 2018 в 19:10
  • только не rapentNode, а parentNode 19 авг 2018 в 6:25
  • опечатался немного )
    – Gs D
    19 авг 2018 в 7:15
0

Для того чтобы спрятать форму нужно поменять некоторые CSS свойства:

document.forms[0].style='display:none';

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


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

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.