Вывод ответа сервера в html

252

22 сентября 2017, 17:37

Есть форма регистрации,

<form action="url" method='post'>
        <input name="name" type="text">
        <input name="secondname" type="text">
        <input name="email" type="email">
        <select name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <input name="pass" type="password">
            <input type="checkbox" class="form-check-input" name="agree" id="agree">
        <button type="submit">Submit</button>
    </form>

отправляю запрос на сервер. После нажатия на кнопку "Отправить" приходит ответ в виде json-а на новой странице. Например {"message":"Creating user error. Email already exists.","status":"Error"} Как вывести его например блоком или alert-ом без перехода на страницу?

Answer 1

JS + JQ:

<script>
$(document).ready(function() {
  $('html').on('submit', 'form', function() {
    $(this).html('Идет обработка данных, пожалуйста подождите');
    $.post($(this).attr('action'), $(this).serialize()).done(function(data) {
      var data = JSON.parse(data);
      $(this).html(data.message);
    })
    return false;
  })
})
</script>