Отправка формы по Ajax: различия между версиями
Перейти к навигации
Перейти к поиску
Misha (обсуждение | вклад) Нет описания правки |
Misha (обсуждение | вклад) |
||
| (не показаны 3 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
==Отправка через serialize== | |||
<pre> | <pre> | ||
var $form = $('#form_brifada'); | var $form = $('#form_brifada'); | ||
| Строка 18: | Строка 19: | ||
</pre> | </pre> | ||
==Оправка через FormData== | |||
Еще один вариант | Еще один вариант | ||
<pre> | <pre> | ||
$('.send-ajax').submit(function(e) { // Форма отправляется при классе send-ajax | $('.send-ajax').submit(function(e) { // Форма отправляется при классе send-ajax | ||
e.preventDefault(); // | e.preventDefault(); // Запрещаем стандартную отправку | ||
$("input").removeAttr("disabled"); // Убираем атрибут disable у input (иначе такие данные не отправятся) | $("input").removeAttr("disabled"); // Убираем атрибут disable у input (иначе такие данные не отправятся) | ||
var form = $('.send-ajax').get(0); // You need to use standard javascript object here | var form = $('.send-ajax').get(0); // You need to use standard javascript object here | ||
if($("table").is('.datatable') == true) // Если используется js библиотека datatable и | if($("table").is('.datatable') == true) // Если используется js библиотека datatable и input поля в ней, | ||
{ // то делаем сериализацию полей данных в таблице и преобразуем в FormData | { // то делаем сериализацию полей данных в таблице и преобразуем в FormData | ||
var data = new FormData(form); // Сначала преобразуем поля вне таблицы | var data = new FormData(form); // Сначала преобразуем поля вне таблицы | ||
| Строка 32: | Строка 34: | ||
data.append(input.name,input.value); // Добавляем поля из таблицы | data.append(input.name,input.value); // Добавляем поля из таблицы | ||
}); | }); | ||
} else var data = new FormData(form); // Если таблицы нет, то делаем просто | } else var data = new FormData(form); // Если таблицы нет, то делаем просто FormData | ||
if($("#editor").length) // Если используется CKEDITOR, то добавляем данные из него. | if($("#editor").length) // Если используется CKEDITOR, то добавляем данные из него. | ||
{ | { | ||
| Строка 40: | Строка 42: | ||
} | } | ||
} | } | ||
$.ajax({ | $.ajax({ | ||
cache: false, | cache: false, | ||
| Строка 52: | Строка 51: | ||
data: data // Данные формы | data: data // Данные формы | ||
}).done(function(data) { | }).done(function(data) { | ||
$('.disabled').prop('disabled', true); // Добавляем атрибут disable к | $('.disabled').prop('disabled', true); // Добавляем атрибут disable к input с классом disable | ||
var out = JSON.parse(data); | var out = JSON.parse(data); | ||
}).fail(function() { | }).fail(function() { | ||
Текущая версия от 23:30, 23 ноября 2019
Отправка через serialize
var $form = $('#form_brifada');
$form.submit(function(event) {
event.preventDefault(); // Для того, что бы форма не отправлялась по кнопке
$.ajax({
url: $form.attr('action'), // Данные для формы берутся из ее параметров
type: $form.attr('method'),
data: $form.serialize(), // возвращает строку пригодную для передачи через URL строку
success: function(data) { // При успешном выполнении, обрабатываем пришедшие данные
data = JSON.parse(data); // data - данные пришедшие в json формате
//console.log(data);
},
error: function() {
alert('Произошла неизвестная ошибка. Попробуйте позже');
}
});
});
Оправка через FormData
Еще один вариант
$('.send-ajax').submit(function(e) { // Форма отправляется при классе send-ajax
e.preventDefault(); // Запрещаем стандартную отправку
$("input").removeAttr("disabled"); // Убираем атрибут disable у input (иначе такие данные не отправятся)
var form = $('.send-ajax').get(0); // You need to use standard javascript object here
if($("table").is('.datatable') == true) // Если используется js библиотека datatable и input поля в ней,
{ // то делаем сериализацию полей данных в таблице и преобразуем в FormData
var data = new FormData(form); // Сначала преобразуем поля вне таблицы
var other_data = table.$('input,select,textarea').serializeArray();
$.each(other_data,function(key,input)
{
data.append(input.name,input.value); // Добавляем поля из таблицы
});
} else var data = new FormData(form); // Если таблицы нет, то делаем просто FormData
if($("#editor").length) // Если используется CKEDITOR, то добавляем данные из него.
{
if(CKEDITOR.instances['editor'] != undefined)
{
data.append('content', CKEDITOR.instances['editor'].getData());
}
}
$.ajax({
cache: false,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
method: 'POST', // Метод отправки формы
//type: $(this).attr('method'),
url: $(this).attr('action'), // Url, куда отправляется форма
data: data // Данные формы
}).done(function(data) {
$('.disabled').prop('disabled', true); // Добавляем атрибут disable к input с классом disable
var out = JSON.parse(data);
}).fail(function() {
console.log('fail');
});
});