Создание объекта JSON из нескольких полей формы с использованием jQuery

Question

Я пытаюсь создать объект JSON из группы сгруппированных элементов HTML, это моя разметка,

HTML:

<div id="locations_wrapper">
    <div id="location_0" class="locations">
        <div class="container">
          <label for="locations_province">Province: </label>
          <div>
            <select id="locations_province" name="locations_province" onchange="get_cities(this);">
              <option value="">Select one</option>
              <option>Eastern Cape</option>
              <option>Freestate</option>
              <option>Gauteng</option>
              <option>KZN</option>
              <option>Limpopo</option>
              <option>Mpumalanga</option>
              <option>North West</option>
              <option>Northern Cape</option>
              <option>Western Cape</option>
            </select>
          </div>
        </div>
        <!-- City -->
        <div class="container">
          <label for="locations_city">City: </label>
          <div>
            <select id="locations_city" name="locations_city">
              <option value="">Select one</option>
            </select>
          </div>
        </div>
        <!-- Towns -->
        <div class="container">
          <label for="locations_towns">Towns: </label>
          <div>
            <input type="text" name="locations_towns" id="locations_towns" />
          </div>
        </div>
    </div>
</div>

В настоящее время я клонирую эти 3 поля и добавляю их к родительскому элементу div location_wrapper, я также увеличиваю атрибут id каждого поля, теперь проблема в том, что мне нужно получить все клонированные элементы и каким-то образом, используя jQuery / ajax, захватить все данные каждого местоположения в базе данных.

Как я могу получить эту информацию?

вот некоторый jQuery, который я написал, который в основном делает то же самое, но с одним выстрелом вместо 3:

    var sections = $('#systems_wrapper').find('.dropDowns');
    var newArray = new Array();

        sections.each(function(){
            var id = $(this).attr('id');
            var val = $(this).val();
            var o = { 'id': id, 'value': val };

            newArray.push(o);
        });

        $.ajax({
                type: 'POST',
                url: 'qwer.php',
                dataType: 'json',
                data: { json: JSON.stringify(newArray) }
        });

Может быть, я мог бы попытаться создать объект JSON с 3 полями провинция, город и город? Я немного неуверен.

Спасибо заранее!

Answer 1

Самый простой способ сериализации формы как JSON - это использовать jQuery's serializeArray():

JSON.stringify($("#myForm").serializeArray());

Вам нужно будет обернуть форму вокруг вашего HTML, чтобы это работало. Это не изменит поведение. http://api.jquery.com/serializeArray/

Answer 2

Я подумал, что если у вас есть контроль над тем, что может принять сервер, будет передавать пакет вместо массива, например

{"province" : "", "city" : "", "town" : ""}

Я бы тогда создал объект полезной нагрузки:

var province, city, town, payload;

province = $("#locations_province").val();
city= $("#locations_city").val();
town= $("#locations_town").val();
payload = {"province" : province, "city" : city, "town" : town};

... и передать полезную нагрузку в $ .ajax:

$.ajax({
  type: 'POST',
  url: 'qwer.php',
  dataType: 'json',
  data: payload
  });

jQuery будет кодировать URI для вас.

Вы можете еще больше упростить создание полезной нагрузки, если используете Усы .

Answer 3

Из вашего вопроса не очень понятно, чего вы пытаетесь достичь.Но я предполагаю, что из вашей разметки вы создаете что-то, что позволит пользователю добавлять несколько «местоположений» в объекте location_wrapper.Подобные вещи обычно начинаются с разметки, как вы показали, предоставляя пользователю одну пустую форму «местоположение» для заполнения (в данном случае 3 поля);и кнопку, которую они могут щелкнуть, чтобы добавить дополнительные блоки «расположение» по мере необходимости.

Предполагая, что это то, что вы делаете, мое первое предложение будет состоять в том, что вместо клонирования трех полей формы по отдельностидолжен клонировать только свой родительский контейнер, "location_0".Нечто подобное должно сработать:

$('#location_0').clone().appendTo('#locations_wrapper');

Это скопирует весь блок - и вам не нужно беспокоиться об изменении идентификаторов вещей, jQuery и / или браузер позаботятсячтобы убедиться, что все имеет уникальный идентификатор за кулисами.

Теперь, при условии, что ваша разметка находится в форме, самый простой способ вернуть информацию на сервер - просто отправить форму,Пост формы будет содержать несколько полей с одним и тем же именем - что полностью допустимо, и большинство языков на стороне сервера имеют простой способ справиться с ним.

В php параметры запроса с несколькими значениями входят какмассив.Так что в php вы можете сделать что-то вроде этого:

<?php
$field_names = ['locations_province', 'locations_city', 'locations_town'];

$locations = array();
foreach( $field_names as $fieldname ) {
    $temp = (array)$_REQUEST[$fieldname];
    for( $i=0; $i<count($temp); ++$i ) {
        if( !isset($locations[$i]) ) $locations[$i] = array();
        $locations[$i][$fieldname] = $temp[$i];
    }
}

Если вы хотите объединить все это в javascript, вы можете получить доступ к вашим группам полей следующим образом:

var allLocations = [];
$(".locations").each( function(i, location) {
    // for each location block
    location = $(location);
    var loc = {
        'locations_province' : $("select[name='locations_province']", location).val(),
        'locations_city' : $("select[name='locations_city']", location).val(),
        'locations_towns' : $("input[name='locations_towns']", location).val()
    };
    allLocations.push( loc );
});

// allLocations will contain a list of objects with properties representing 
// your locations.  at this point, you can do whatever you want with 'em 
// send them up via Ajax, or whatever.

goodудачи!