Ajax -vorm Dien voorbeelde in met jQuery

Blog

Ajax -vorm Dien voorbeelde in met jQuery

Oorsig

In hierdie jQuery stuur Ajax 'n meervoudige vorm of 'n voorbeeld van FormData-tutoriaal in-u leer hoe u die vorm kan indien met behulp van die jquery-ajax met veelvoudige data of FromData. Hier sal u weet oor die basiese vrae oor jquery ajax -vorm.



In hierdie tutoriaal, leer jquery ajax -vorms met die vormdata stap vir stap. 'N Eenvoudige jQuery Ajax -voorbeeld om u te wys hoe u 'n meervoudige vorm kan indien met Javascript | _+_ | en | _+_ |.

As u jQuery se Ajax Form Submit gebruik, kan u die vormdata na die bediener stuur sonder om die hele bladsy te herlaai. Dit sal gedeeltes van 'n webbladsy opdateer - sonder om die hele bladsy te herlaai.



AJAX: AJAX (asynchrone JavaScript en XML) is die kuns om data met 'n bediener uit te ruil en dele van 'n webblad by te werk - sonder om die hele bladsy te herlaai.

INHOUDSOPGAWE

  • Skep HTML -vorm
  • jQuery Ajax -kode

Gereelde vrae

  • Hoe kan ek ekstra velde of data byvoeg met vormdata in jQuery ajax?
  • ajax FormData: Onwettige oproep
  • Hoe stuur ek meervoudige/FormData of lêers met jQuery.ajax?

Skep HTML -vorm

In hierdie stap sal ons 'n HTML -vorm skep vir die oplaai van verskeie lêers of FormData en 'n ekstra veld.



FormData

jQuery Ajax -kode

In hierdie stap skryf ons jquery ajax -kode vir die stuur van 'n vormdata na die bediener.

$.ajax()

Gereelde vrae - jQuery Ajax Form Submit

1. Hoe om ekstra velde by te voeg met vormdata in jQuery ajax?

Die | _+_ | metode van die jQuery Ajax Form Submit with FormData Example koppelvlak voeg 'n nuwe waarde by 'n bestaande sleutel in 'n | _+_ | voorwerp, of voeg die sleutel by as dit nie reeds bestaan ​​nie.

$(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: Onwettige oproep

jQuery probeer om u FormData -voorwerp in 'n string te omskep, voeg dit by u $ .ajax -oproep:

**append()**

3. Hoe stuur ek meervoudige/FormData of lêers met jQuery.ajax?

In hierdie stap leer u hoe u verskeie lêers met jQuery ajax kan stuur. Kom ons kyk na die onderstaande kodefragment:

FormData

Let op

Dit is beeldtitel

Afsluiting

In hierdie jquery ajax -vormstudie - het u geleer hoe u die vormdata of meervoudige vorm kan stuur of indien met behulp van die jquery ajax op die bediener. U ken ook die verwante navrae oor die jquery ajax -vorm.

#javascript #jquery #ajax