jQuery Utilizzando Ajax per inviare un modulo


Esempio

A volte potresti avere un modulo e vuoi inviarlo usando ajax.

Supponiamo tu abbia questa semplice forma -

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

È possibile utilizzare il seguente codice jQuery (all'interno di una chiamata $(document).ready ) -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

Spiegazione

  • var $form = $(this) - il modulo, memorizzato nella cache per il riutilizzo
  • $('#ajax_form').submit(function(event){ - Quando viene inviato il modulo con ID "ajax_form", eseguire questa funzione e passare l'evento come parametro.
  • event.preventDefault(); - Impedire al modulo di inviare normalmente (In alternativa, è possibile utilizzare return false dopo l' ajax({}); istruzione, che avrà lo stesso effetto)
  • url: $form.attr('action'), - Ottieni il valore dell'attributo "action" del modulo e url: $form.attr('action'), per la proprietà "url".
  • data: $form.serialize(), - Converte gli input all'interno del modulo in una stringa adatta per l'invio al server. In questo caso restituirà qualcosa come "name=Bob&email=bob@bobsemailaddress.com"