Как указать поле данных в форме JQuery AJAX?

Question

Мне нужно, чтобы мои данные HTML-формы поступили на сервер через запрос JQuery AJAX POST в том же формате, как если бы форма была отправлена ​​с помощью обычной отправки.Я пытался использовать $ .serialize () и $ .serializeArray (), и ни один из них не дает простой

$('#booking-form').on('submit', function(e) {
   var formdata = $(this).serialize();
   // process data and send ajax request
   console.log(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.log('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][]")

Спасибо

Answer 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.log(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>