php - 使用 jQuery 从多个表单字段创建 JSON 对象

Question

我正在尝试从一组分组的 HTML 元素创建一个 JSON 对象，这是我的标记，

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 locations_wrapper，我还增加了每个字段的 id 属性，现在的问题是我需要获取所有克隆的元素并以某种方式使用 jQuery/ajax，将每个位置的所有数据捕获到数据库中。

我怎样才能获得这些信息？

这是我写的一些 jQuery，它基本上做同样的事情，但用一个字段而不是三个字段:

    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) }
        });

也许我可以尝试创建一个包含省、市和镇 3 个字段的 JSON 对象？我有点不确定。

提前致谢!

Answer 1

将表单序列化为 JSON 的最简单方法是使用 jQuery 的 serializeArray():

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

不过，您需要在 HTML 周围包装一个表单才能使其正常工作。它不会改变行为。 http://api.jquery.com/serializeArray/