Formulari Ajax Envieu exemples mitjançant jQuery
Visió general
En aquest jQuery Ajax envia un formulari multipart o un exemple de tutorial FormData: aprendreu a enviar el formulari mitjançant jQuery ajax amb dades de diverses parts o FromData. Aquí coneixereu les preguntes freqüents bàsiques del formulari jQuery Ajax.
En aquest tutorial, apreneu el formulari jQuery Ajax enviat amb les dades del formulari pas a pas. Un exemple senzill de jQuery Ajax per mostrar-vos com enviar un formulari multipart mitjançant Javascript FormData i $.ajax().
Si utilitzeu el formulari Ajax Submit de jQuery, podeu enviar les dades del formulari al servidor sense recarregar tota la pàgina. Això actualitzarà les parts d'una pàgina web, sense recarregar tota la pàgina.
AJAX: AJAX (JavaScript i XML asíncrons) és l’art d’intercanviar dades amb un servidor i actualitzar parts d’una pàgina web, sense recarregar tota la pàgina.
Taula de continguts
- Crea un formulari HTML
- jQuery Codi Ajax
Preguntes freqüents
- Com afegir dades o camps addicionals amb dades de formulari a jQuery ajax?
- ajax FormData: invocació il·legal
- Com enviar fitxers multipart / FormData o fitxers amb jQuery.ajax?
Crea un formulari HTML
En aquest pas, crearem un formulari HTML per a diverses càrregues de fitxers o FormData i un camp addicional.
jQuery Ajax Form Submit with FormData Example jQuery Codi Ajax
En aquest pas, escriurem el codi ajax de jquery per enviar un formulari al servidor.
$(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); } }); }); }); Preguntes més freqüents - Envieu el formulari jQuery Ajax
1. Com afegir camps addicionals amb dades de formulari a jQuery ajax?
El **append()** mètode de la FormData interfície afegeix un valor nou a una clau existent dins d'un FormData objecte o afegeix la clau si encara no existeix.
// 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'); 2. ajax FormData: invocació il·legal
jQuery intenta transformar el vostre objecte FormData en una cadena, afegiu-lo a la vostra trucada $ .ajax:
processData: false, contentType: false 3. Com enviar fitxers multipart / FormData o fitxers amb jQuery.ajax?
En aquest pas aprendreu a enviar diversos fitxers mitjançant jQuery ajax. Vegem el fragment de codi següent:
var data = new FormData(); jQuery.each(jQuery('#file')[0].files, function(i, file) { data.append('file-'+i, file); }); $.ajax({ url: 'upload.php', data: data, cache: false, contentType: false, processData: false, method: 'POST', success: function(data){ console.log('success'); } }); Nota
Conclusió
En aquest tutorial del formulari jQuery Ajax: heu après a enviar o enviar les dades del formulari o el formulari multipart mitjançant el jQuery Ajax del servidor. També heu conegut les consultes relacionades amb el formulari jquery ajax.
#javascript #jquery #ajax