Question

我有一个包含n个div的表单，每个div包含单独的输入。这些div存在于相同的类名“c1”下，但不包含任何其他属性。每个c1包含具有唯一类名的相同输入。每个div将始终包含相同的输入样式。这方面的一个例子是：

<div class="c1">
    <input class="in1" type="text"/>
    <input class="in2" type="text"/>
</div>
<div class="c1">
    <input class="in1" type="text"/>
    <input class="in2" type="text"/>
</div>
<div class="c1">
    <input class="in1" type="text"/>
    <input class="in2" type="text"/>
</div>

应使用jQuery的$ .post（...）通过帖子发送信息。我没有使用id系统来修改内容的用户，即添加和删除c1 div。我不知道如何将收集到的信息发布到php页面中以获取n个项目，也不确定如何根据div保存信息。有什么建议吗？

我一直在考虑使用序列化，但我不确定如何根据封装的div保持信息的唯一性。另一种方法是使用map命令对帖子的“数据”参数进行自定义.each迭代遍历每个div，但有些东西告诉我，我正朝着错误的路径前进。

Answer 1

您可以执行以下操作来自动生成命名参数：

    var postData = {};
    $(".c1").each(function() {
        var name = "input" + $(this).index();

        postData[name + "in1"] = $(this).find(".in1").val();
        postData[name + "in2"] = $(this).find(".in2").val()       
    })

    console.log(postData);

然后只需通过AJAX提交postData

Answer 2

如果您动态生成它，则可以为每个输入设置唯一ID。像inp1，inp2等。然后，您可以根据这些独特的ID创建地图。

Answer 3

如果您严格遵循HTML代码，则无法自动执行任何操作，例如使用jQuery中的.serialize()方法，因为它至少需要使用name。

手动执行，您可以创建数据然后发布，如：

$("#btnSave").click(function() {

var dt = {},
    div = 0,
    arr = 0;

$(".c1").each(function() {
  // for each <div class="c1">
  $(this).find("input").each(function() {
    // for each <input> inside the <div>

    dt['p' + arr++] = 'd' + div + 
            '_c_' + $(this).attr("class") + 
            '_v_' + $(this).val();
  });
  div++;
});

// now, we post the data    
$.post("http://bing.com/", dt, function(data) {
  // do something...
});

return false; // dont post automatically

});

然后你有类似的东西：

p0  _d_0_c_in1_v_1
p1  _d_0_c_in2_v_4
p2  _d_1_c_in1_v_2
p3  _d_1_c_in2_v_5
p4  _d_2_c_in1_v_3
p5  _d_2_c_in2_v_6

并从d2_c_in2_v_6您可以将字符串拆分为：

_d_ for div
_c_用于班级名称
_v_输入值

Live example in JsBin

复杂的jQuery帖子

3 个答案: