Ajax -lomake Lähetä esimerkkejä jQueryn avulla

Blogi

Ajax -lomake Lähetä esimerkkejä jQueryn avulla

Yleiskatsaus

Tässä jQuery Ajax lähettää moniosaisen lomakkeen tai FormData-opetusesimerkin-opit lähettämään lomakkeen käyttämällä jquery ajaxia moniosaisilla tiedoilla tai FromDatasta. Täällä tiedät jquery ajax -muodon perusasioista.

Tässä opetusohjelmassa voit oppia jquery ajax -lomakkeen lähettämät lomaketiedot vaihe vaiheelta. Yksinkertainen jQuery Ajax -esimerkki, joka näyttää kuinka lähettää moniosainen lomake Javascriptin avulla | _+_ | ja | _+_ |.

Jos käytät jQueryn Ajax -lomakkeen lähetystä, voit lähettää lomaketiedot palvelimelle lataamatta koko sivua uudelleen. Tämä päivittää osia verkkosivusta - lataamatta koko sivua uudelleen.

AJAX: AJAX (asynkroninen JavaScript ja XML) on taidetta vaihtaa tietoja palvelimen kanssa ja päivittää verkkosivun osia - lataamatta koko sivua uudelleen.

Sisällysluettelo

  • Luo HTML -lomake
  • jQuery Ajax -koodi

Usein kysytyt kysymykset

  • Kuinka lisätä ylimääräisiä kenttiä tai tietoja lomaketiedoilla jQuery ajaxissa?
  • ajax FormData: Laiton kutsuminen
  • Kuinka lähettää moniosaisia/FormData -tiedostoja tai tiedostoja jQuery.ajaxin avulla?

Luo HTML -lomake

Tässä vaiheessa luomme HTML -lomakkeen useille tiedostojen latauksille tai FormDatalle ja ylimääräisen kentän.

FormData

jQuery Ajax -koodi

Tässä vaiheessa kirjoitamme jquery ajax -koodin lomaketietojen lähettämiseksi palvelimelle.

$.ajax()

Usein kysytyt kysymykset - jQuery Ajax Form Submit

1. Kuinka lisätä ylimääräisiä kenttiä lomaketiedoilla jQuery ajaxiin?

| _+_ | menetelmä jQuery Ajax Form Submit with FormData Example käyttöliittymä lisää uuden arvon olemassa olevaan avaimeen | _+_ | objekti tai lisää avaimen, jos sitä ei vielä ole.

$(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: Laiton kutsuminen

jQuery yrittää muuttaa FormData -objektisi merkkijonoksi, lisää tämä $ .ajax -puheluusi:

**append()**

3. Kuinka lähettää moniosaisia/FormData -tiedostoja tai tiedostoja jQuery.ajaxin avulla?

Tässä vaiheessa opit lähettämään useita tiedostoja jQuery ajaxin avulla. Katso alla oleva koodinpätkä:

FormData

Huomautus

Tämä on kuvan otsikko

Johtopäätös

Tässä jquery ajax -lomakkeen opetusohjelmassa - olet oppinut lähettämään tai lähettämään lomaketiedot tai moniosaisen lomakkeen käyttämällä palvelimen jquery ajax -palvelua. Olet myös tiennyt aiheeseen liittyvät jquery ajax -lomakkeen kyselyt.

#javascript #jquery #ajax