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.
FormDatajQuery 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:
FormDataNota
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