Перезагрузка страницы с использованием ajax

Question

Суть моего вопрос заключается в том что, как отправить форму без перезагрузки страницы даже если имеется ajax скрипт. Сама форма отправляет данные в базу , но страница перезагружается.

Код формы:

<form id="form" enctype="multipart/form-data">
  <textarea type="text" name="text" id="text" placeholder="Ваш текст..." class="text1"></textarea>
  <button type="submit" name="submit" id="submit" class="submit" style="border: 0;" return false;><img class="im1" src="/default/отправить.png"></button>
</form>

Код ajax:

<script>
$('#form button[type=submit]').click(function() {
    $.ajax({
        type: 'POST',
        url: 'chat.php',
        data: $('#form').serialize() + '&' + this.name + '=' + this.value,
        success: function(data) {
            console.log(data);
        }
    });
});
</script>

Answer 1

Сама форма отправляет данные в базу , но страница перезагружается.

Отправку формы лучше вешать на саму форму.

Дабы страница не перезагружалась - нужно в обработчике делать отмену действий по умолчанию.

$('#form').on('submit', function(e) {
  // отменяем действие по умолчанию (т.е. отправку формы)
  e.preventDefault()
  // потом можно выполнять любые действия
  console.log('Данные отправляются')
  /*
  $.ajax({
    type: 'POST',
    url: 'chat.php',
    data: $('#form').serialize() + '&' + this.name + '=' + this.value,
    success: function(data) {
      console.log(data);
    }
  });
  */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" enctype="multipart/form-data">
  <textarea type="text" name="text" id="text" placeholder="Ваш текст..." class="text1"></textarea>
  <button type="submit" name="submit" id="submit" class="submit" style="border: 0;" return false;><img class="im1" src="/default/отправить.png"></button>
</form>

Answer 2

При таком подходе, когда форма отправляется при клике на кнопку, достаточно кнопке сделать тип не submit, а просто button.

Answer 3

Это должно помочь

<form id="form" enctype="multipart/form-data">
  <textarea type="text" name="text" id="text" placeholder="Ваш текст..." class="text1"></textarea>
  <button name="submit" id="submit" class="submit" style="border: 0;" return false;><img class="im1" src="/default/отправить.png"></button>
</form>

<script>
    $('.submit').click(function() {
        var form_data = new FormData();
        form_data.append(prop, $('#text').val())
        $.ajax({
            type: 'POST',
            url: 'chat.php',
            data: form_data,
            success: function(data) {
                $('#result').text(data);
            }
        });
});
</script>

При клике класса submit выполняется функция по отправке данных. Остаётся только на сервере принять

БЛОГ НА HUSL

Перезагрузка страницы с использованием ajax

Ответы (3 шт):