Справочники, инструменты, документация

Перевести все формы на Ajax

Задача простая: добавить ко всем формам возможность отправки данных без перезагрузки страницы.

Создаем обработчик, например: file.php. В нём вы сами будете решать как обрабатывать поступившие данные ну и выдавать результат.

Создаем код, который повесит на каждую форму ajax событие:

// если подключен jquery
$(document).ready(function() {
  $('form').submit(function() { 
    var th = $(this);
    $.ajax({
      type: 'POST',
      url: 'file.php',
      data: th.serialize()
    }).done(function(result) {
      // console.log(result);   // результат
    });
    return false;
  });
});


// без jquery
document.addEventListener('DOMContentLoaded',function(){
  document.querySelectorAll('form').forEach(function(el){
    el.onsubmit=function onSubmit(form){
      var data=new FormData(form);
      var request=new XMLHttpRequest();
      request.open('POST','file.php',false);
      //request.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // может пригодиться
      request.send(data);
      if(request.readyState==4 && request.status===200){
        // console.log(request.responseText); // результат
      }
      return false;
    }
  });
});

Теперь при отправке форм, в место обработчика указанного в поле action, будет обрабатываться через javascript.