Формуляр Ajax Изпратете примери с помощта на jQuery

Блог

Формуляр Ajax Изпратете примери с помощта на jQuery

Общ преглед

В този jQuery Ajax изпраща формуляр с много части или пример за урок по FormData-ще научите как да изпратите формуляра с помощта на jquery ajax с данни от много части или FromData. Тук ще знаете за основните често задавани въпроси на jquery ajax форма.

В този урок научете jquery ajax изпраща формуляра с данните от формуляра стъпка по стъпка. Прост пример за jQuery Ajax, който ще ви покаже как да изпратите формуляр с много части, използвайки Javascript | _+_ | и | _+_ |.

Ако ще използвате Изпращане на формуляр Ajax на jQuery, можете да изпратите данните от формуляра на сървъра, без да презареждате цялата страница. Това ще актуализира части от уеб страница - без презареждане на цялата страница.

AJAX: AJAX (асинхронен JavaScript и XML) е изкуството за обмен на данни със сървър и актуализиране на части от уеб страница - без презареждане на цялата страница.

Съдържание

  • Създайте HTML формуляр
  • jQuery Ajax код

Често задавани въпроси

  • Как да добавите допълнителни полета или данни с данни от формуляр в jQuery ajax?
  • ajax FormData: Незаконно извикване
  • Как да изпращаме мултичасти/FormData или файлове с jQuery.ajax?

Създайте HTML формуляр

В тази стъпка ще създадем HTML формуляр за качване на множество файлове или FormData и допълнително поле.

FormData

jQuery Ajax код

В тази стъпка ще напишем jquery ajax код за изпращане на данни от формуляр до сървъра.

$.ajax()

Често задавани въпроси - Изпращане на формуляр за jQuery Ajax

1. Как да добавим допълнителни полета с данни от формуляра в jQuery ajax?

| _+_ | метод на jQuery Ajax Form Submit with FormData Example интерфейсът добавя нова стойност към съществуващ ключ вътре в | _+_ | обект или добавя ключа, ако той вече не съществува.

$(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: Незаконно извикване

jQuery се опитва да трансформира вашия FormData обект в низ, добавете това към вашето повикване $ .ajax:

**append()**

3. Как да изпращаме мултичасти/FormData или файлове с jQuery.ajax?

В тази стъпка ще научите как да изпращате множество файлове с помощта на jQuery ajax. Нека да видим долния фрагмент от код:

FormData

Забележка

Това е заглавието на изображението

Заключение

В този урок за формуляри на jquery ajax - научихте как да изпращате или изпращате данни от формуляра или формуляр с много части, като използвате jquery ajax на сървъра. Също така, знаете свързаните заявки на jquery ajax формуляр.

#javascript #jquery #ajax