GET/POST запрос в JSON (jQuery)

386
24 февраля 2017, 02:08

Не могу сообразить... Вот получаю строку, разбиваю её по амперсандам.

var form = ($('.form').serialize()).split('&');

Нужно преобразовать в JSON, для передачи по ajax, чтобы в php после json_decode можно было получить массив key => value

Answer 1
var data = JSON.stringify($( "form" ).serializeArray());

отправка:

$.ajax( {
  type: "POST",
  url: 'myHandler.php',
  data: {json: data},     
  success: function( response ) {
    console.log( response );
  }
});

php файл 

print_r(json_decode($_POST['json'], true));

Обрати внимание, что в данном случае надо использовать serializeArray, который возвращает массив объектов, содержащий данные элементов формы, а не serialize. А потом, собственно, отправить json строку

UPD: Если не все получится как надо и нужно сделать json как key=value, где key - имя параметра в форме, а value - значение параметра в форме, то можно поступить так:

var result = { };
$.each($( "form" ).serializeArray(), function() {
    result[this.name] = this.value;
});

то есть сформировать через цикл объект из полученного массива и потом его отправить:

$.ajax( {
  type: "POST",
  url: 'get.php',
  data: {json: JSON.stringify(result)},   
  success: function( response ) {
    console.log( response );
  }
});

Дополнение:

В случае если в форме присутствуют массивы данных, нужен более глубокий проход..Приложу сразу пример с html и js:

// функция глубокого прохода и сериализации 
$.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
        if (o[this.name] !== undefined) { 
            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; 
}; 
 
// обработка 
$( "form" ).on( "submit", function( event ) { 
  event.preventDefault(); 
  // применение кастомного метода для сериализации и преобразование в json строку  
  var data = $('form').serializeObject(); 
  console.log(data);   
  data = JSON.stringify(data); 
 
  // отправка 
   
  $.ajax( { 
      type: "POST", 
      url: 'myfile.php', 
      data: {json: data},	   
      success: function( response ) { 
        console.log( response ); 
      } 
    });	 
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form>   
	<input type="text" name="firstname" value="122223"><br>   
	<input type="text" name="lastname" value="123"> 
   
	<input type="text" name="firstname22" value="122223"><br>   
	<input type="text" name="lastname33" value="123"> 
   
	<input type="text" name="firstnameasd" value="122223"><br>   
	<input type="text" name="lastnameasdasda" value="123"> 
   
	<input type="text" name="name[]" value="5" /> 
	<input type="text" name="email[]" value="555" /> 
 
	<input type="text" name="name[]" value="6" /> 
	<input type="text" name="email[]" value="666" /> 
 
	<input type="submit" /> 
</form>

Он же на https://jsfiddle.net/3mw6vzww/

READ ALSO
Получить значения из json
jQuery

Получить значения из json

Есть обработчик

 254
Превью показывается не так как надо
jQuery

Превью показывается не так как надо

Здравствуйте есть код превью изображений на сайт и проблема в том что кода другое изображение добавляю то оно грузится не там где надо и с повтором...

 287
Помогите разобраться с селекторами css
CSS

Помогите разобраться с селекторами css

Как например задать класс второму по счету div, или задать только первому нужные стили, если у каждого однаковые названия классов? Немного...

 228
Exception-safe coding [требует правки]
c++

Exception-safe coding [требует правки]

Порекомендуйте материалы по написанию кода на C++ с механизмом обработки исключений со строгими гарантиямиОчень приветствуются примеры...

 234