我不确定我的标题是否正确,但我目前有一个可复制的表单,可以获得JSON字符串化和另一个获得JSON字符串化的正常输入,因此当单击克隆时,第二个输入将被克隆并在提交时单击我在控制台中获得以下值:
{"dependant1":[{"name":"daniel"}],"dependant2":[{"name":"allen"}]}
{"mainmember":[{"name":"steve"}]}
我如何将两者结合起来:
{"mainmember": [{"name": "steve"}],"dependant1": [{"name": "daniel"}],"dependant2": [{"name": "allen"}]}
继承人jsFiddle:http://jsfiddle.net/dawidvdh/uhJ7w/
和代码:
jQuery的:
//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var input_groups = ["group-1"];
var group;
var name_input_groups = ["name-group-1"];
var values;
var name_fields=[0];
var name_input = "<input class='name' name='name' type='text' />";
jQuery(document).ready(function(e) {
jQuery(name_fields).each(function() {
jQuery(name_input).appendTo('#name-group-1');
});
jQuery('#clone').click(function() {
clone_dependant();
});
function clone_dependant() {
var oldId = g_counter;
g_counter++;
var id_newDiv = 'group-'+ g_counter;
currentdep ='dependant-'+g_counter;
var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter);
var name_newDiv = 'name-group-'+ g_counter;
$clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter );
$clonedDiv.find('input[type="text"]').val('');
$clonedDiv.insertAfter("#dependant-" + oldId);
name_input_groups.push(name_newDiv);
input_groups.push(id_newDiv);
}
var result = {};
var dependants;
var mainmember;
var main_result = {};
var dep_counter = 0;
jQuery('#submit').click(function(){
jQuery('.dependant').each(function(k, v){
dep_counter++
dependants = {};
result['dependant'+dep_counter] = [dependants];
dependants['name'] = $(v).find('.name').val();
});
jQuery('.main-member').each(function(k, v){
mainmember = {}
mainmember['name'] = $(v).find('.main_name').val();
main_result['mainmember'] = [mainmember];
});
var jsonData = JSON.stringify(result);
var mainData = JSON.stringify(main_result);
console.log(jsonData);
console.log(mainData);
jQuery.ajax({
type: "POST",
url: "mail.php",
dataType: "json",
data: {parameters: jsonData}
});
});
//submit function
});
然后是html
<div id="main-member" class="main-member">
<div id="label">full name:</div> <input class="main_name" />
</div>
<div id="dependant-1" class="dependant">
<div id="label">full name:</div> <div id="name-group-1"></div>
</div>
<button id="clone">Add a Dependant</button>
<button id="submit">submit</button>
并且他们必须在每个循环中使用其余的代码。
提前感谢:)。
答案 0 :(得分:4)
只是不要使用两个不同的变量result
和main_result
,而只使用一个。
如果您需要单独使用它们,请将所有属性复制到您正在进行字符串化的新空对象上。您可以使用jQuery.extend
:
var jsonData = JSON.stringify($.extend({}, result, main_result));
答案 1 :(得分:2)
jQuery.extend
可以做到,
var theData = $.extend({}, result, main_result, true);
...
data: { parameters: JSON.stringify(theData) },
...
答案 2 :(得分:2)
使用$.extend
。
var jsonData = JSON.stringify($.extend({}, result, main_result));
文档:
<强>
jQuery.extend( target [, object1 ] [, objectN ] )
强>返回:对象
描述:将两个或多个对象的内容合并到第一个对象中。
最理想的是,您应该使用单个对象。
var data = {};
jQuery('.dependant').each(function(k, v){
dep_counter++
data['dependant' + dep_counter] = [{
name: $(v).find('.name').val()
}];
});
jQuery('.main-member').each(function(k, v){
data['mainmember'] = [{
name: $(v).find('.main_name').val()
}];
});
...
jQuery.ajax({
...
data: { parameters: data }
...
});
答案 3 :(得分:2)
我认为你正在寻找jQuery的扩展
console.log(jsonData);
console.log(mainData);
jQuery.ajax({
type: "POST",
url: "mail.php",
dataType: "json",
data: {parameters: jQuery.extend(mainData, jsonData)}
});
答案 4 :(得分:1)
不是构建两个单独的对象,而是构建一个
jQuery('.dependant').each(function(k, v){
dep_counter++
dependants = {};
result['dependant'+dep_counter] = [dependants];
dependants['name'] = $(v).find('.name').val();
});
jQuery('.main-member').each(function(k, v){
mainmember = {}
mainmember['name'] = $(v).find('.main_name').val();
result['mainmember'] = [mainmember];
});