Как указать поле данных при отправке формы JQuery AJAX?
Мне нужны данные моей формы HTML, чтобы прибыть на сервер через запрос JQuery AJAX POST в точно таком же формате, как если бы форма была отправлена обычной отправкой. Я пробовал использовать $ .serialize () и $ .serializeArray (), и ни один из них не дает простого
$('#booking-form').on('submit', function(e) {
var formdata = $(this).serialize();
// process data and send ajax request
console.info(formdata);
$.ajax({
headers: { 'X-CSRF-TOKEN': $('#booking-form > input[name = "_token"]').val() },
type: 'POST',
url: 'book',
data: { data: formdata },
success: function (data)
{
// Redirect to booking confirmation page:
if (data.response == 'ok') window.location.replace(data.url);
else alert('Card payment failed)
},
error: function (data) // Server error
{
console.info('Error:', data.responseText);
}
});
// Prevent form submit.
return false;
});
Backend - это Laravel (5.4), но я думаю, что это не проблема, специфичная для Laravel. Регистрация обычной отправки формы дает:
array (
'code' => '2ZSSAVGXAHMOOKGOC0SC',
'ownername' => 'My Name',
'housestreet' => '12 Any street, London',
'city' => 'London',
'ownerpcode' => 'ZipCode Here',
'phone' => '1234567890'
)
Это структура, которую я ищу. Но код выше дает:
array (
'data' => 'code=BUH1HGXDWW84SWGWSO84&ownername=My+Name&housestreet=12+Any+street%2C+London&city=London&ownerpcode=Zipcode+here&phone=1234567890')
или используя $ .serializeArray (), дает:
array (
'data' =>
array (
0 =>
array (
'name' => 'code',
'value' => 'CC22DPHQ2F40G0GCKKK0',
),
2 =>
array (
'name' => 'ownername',
'value' => 'My Name',
),
3 =>
array (
'name' => 'housestreet',
'value' => '12 Any street, London',
),
etc.
Как получить данные в нужном формате на сервере через AJAX (используя JQuery или простой JS)?
Я не могу вручную закодировать поля формы в параметре data: в вызове $ .ajax, поскольку некоторые из них динамически генерируются на сервере, а некоторые - с помощью JS во внешнем интерфейсе и включают поля массива для синтаксического анализа PHP (например, форма поле name = "item[0][extra][]")
Спасибо
@KevinB Я думаю, это все равно даст мне строку или массив массивов имени / значения, не так ли?
Фактически, он даст вам строку во внешнем интерфейсе, но серверная часть должна проанализировать ее в желаемом формате. Просто используйте старый добрый .serialize (), а не .serializeArray.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это функция, которую я использую для сериализации стандартной формы для отправки через ajax;
function serializeForm(formSelector) {
var o = {};
var a = $(formSelector).serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if ($("input[name='" + this.name + "'][type='checkbox']").length <= 0) { //stupid checkboxes
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
}
} else {
o[this.name] = this.value || '';
}
});
return o;
}
//it could be used like this
$("input").change(function(){console.info(serializeForm("form"))});
//or this
$.ajax({
//...snip...
data: serializeForm("form"),
//...snip...
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type = "text" name = "testField" value = "lorem ipsum" />
</form>
data: formdata,