创建使用jQuery的

Question

我想创建从一堆分组HTML元素的JSON对象的多个表单字段的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位置_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) } 
     }); 

也许我可以尝试创建具有3个字段省，市，镇一个JSON对象？我有点不确定。

Thanx提前！

Answer 1

从你的问题来看，你不是很清楚你想要完成什么。但是我从你的标记猜测，你正在构建一些东西，允许用户在“locations_wrapper”对象中添加多个“位置”。这种事情通常以你所显示的标记开始，为用户填写一个空白的“位置”表单（在这种情况下为3字段）;和一个按钮，他们可以点击添加额外的“位置”块根据需要。

假设这是你正在做的事，我的第一个建议是，不要单独克隆三个表单域，你应该克隆他们的父容器，“location_0”。这样的事情应该做的伎俩：

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

将在整个块复制 - 你并不真正需要担心改变的事，jQuery和/或浏览器的ID将确保保健一切都有一个独特的身份证幕后。

现在，假设您的标记位于表单中，将信息备份到服务器的最简单方法就是提交表单。表单文章将包含多个具有相同名称的字段 - 这是完全有效的，并且大多数服务器端语言都有一个处理它的简单方法。

在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. 

好运！

Answer 2

序列化形式JSON的最简单方法是使用jQuery的serializeArray()：

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

你需要换一个形式，在你的HTML这个工作，虽然。它不会改变行为。 http://api.jquery.com/serializeArray/

Answer 3

我的想法是，如果你能控制服务器可以接受的东西，那么可以通过一个包而不是一个数组，例如，

{"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({ 
    type: 'POST', 
    url: 'qwer.php', 
    dataType: 'json', 
    data: payload 
    }); 

jQuery将URI编码的有效载荷为你。

如果您使用Mustache，则可以进一步简化有效负载创建。