Modulo Ajax Invia esempi utilizzando jQuery

Blog

Modulo Ajax Invia esempi utilizzando jQuery

Panoramica

In questo jQuery Ajax invia un modulo multiparte o un esempio di tutorial FormData: imparerai come inviare il modulo utilizzando jquery ajax con dati multiparte o FromData. Qui conoscerai le domande frequenti di base del modulo jquery ajax.



In questo tutorial, impara passo dopo passo gli invii di moduli jquery ajax con i dati del modulo. Un semplice esempio jQuery Ajax per mostrarti come inviare un modulo multiparte, usando Javascript |_+_| e |_+_|.

Se utilizzerai Ajax Form Submit di jQuery, puoi inviare i dati del modulo al server senza ricaricare l'intera pagina. Ciò aggiornerà parti di una pagina Web, senza ricaricare l'intera pagina.



AJAX: AJAX (JavaScript asincrono e XML) è l'arte di scambiare dati con un server e aggiornare parti di una pagina web, senza ricaricare l'intera pagina.

Sommario

  • Crea modulo HTML
  • jQuery codice Ajax

FAQ

  • Come aggiungere campi o dati extra con i dati del modulo in jQuery ajax?
  • ajax FormData: Invocazione illegale
  • Come inviare multipart/FormData o file con jQuery.ajax?

Crea modulo HTML

In questo passaggio, creeremo un modulo HTML per più caricamenti di file o FormData e un campo aggiuntivo.



FormData

jQuery codice Ajax

In questo passaggio, scriveremo il codice jquery ajax per inviare i dati di un modulo al server.

$.ajax()

Domande frequenti – Invio modulo jQuery Ajax

1. Come aggiungere campi extra con i dati del modulo in jQuery ajax?

Il |_+_| metodo del jQuery Ajax Form Submit with FormData Example interfaccia aggiunge un nuovo valore a una chiave esistente all'interno di un |_+_| oggetto o aggiunge la chiave se non esiste già.

$(document).ready(function () { $('#btnSubmit').click(function (event) { //stop submit the form, we will post it manually. event.preventDefault(); // Get form var form = $('#fileUploadForm')[0]; // Create an FormData object var data = new FormData(form); // If you want to add an extra field for the FormData data.append('CustomField', 'This is some extra data, testing'); // disabled the submit button $('#btnSubmit').prop('disabled', true); $.ajax({ type: 'POST', enctype: 'multipart/form-data', url: '/upload.php', data: data, processData: false, contentType: false, cache: false, timeout: 800000, success: function (data) { $('#output').text(data); console.log('SUCCESS : ', data); $('#btnSubmit').prop('disabled', false); }, error: function (e) { $('#output').text(e.responseText); console.log('ERROR : ', e); $('#btnSubmit').prop('disabled', false); } }); }); });

2. ajax FormData: Invocazione illegale

jQuery prova a trasformare il tuo oggetto FormData in una stringa, aggiungi questo alla tua chiamata $.ajax:

**append()**

3. Come inviare multipart/FormData o file con jQuery.ajax?

In questo passaggio imparerai come inviare più file utilizzando jQuery ajax. Vediamo lo snippet di codice seguente:

FormData

Nota

Questo è il titolo dell'immagine

Conclusione

In questo tutorial sul modulo jquery ajax - hai imparato come inviare o inviare i dati del modulo o il modulo multiparte utilizzando jquery ajax sul server. Inoltre, conosci le query correlate del modulo jquery ajax.

#javascript #jquery #ajax