具有相同提交/单击功能的 AJAX 多个表单答案

【问题标题】：AJAX Multiple Forms With Same Submit/Click Function具有相同提交/单击功能的 AJAX 多个表单
【发布时间】：2013-12-06 04:43:47
【问题描述】：

我有多个使用 Ajax 传递的表单（类似的），以使用下面的代码附加一个 PHP 页面。但是，当我单击第一个或第二个表单时，它只发送第一个表单的数据。我可以在所有表单上只使用一个函数，还是有更好的方法？

    $('.col_1').click(function(){   // $('#col_1').on("click", function(){
            var parent_id = $('input[name=parent_id]').val(); 
            var child_id = $('input[name=child_id]').val(); ////  
         $.ajax({
              type:"POST",
              url: "array-2.php",
              data:{parent_id: parent_id, child_id: child_id},                          
              success: function(){
        //do stuff after the AJAX calls successfully completes
             }

         }).done(function(data) {
       $('body').append(data);
         });
    });

这是我正在使用的 HTML。

    <form  name="col_1" id="columnA1"  class="col_1"><div>Entrepreneur</div>
    <input name="parent_id" type="hidden" id="parent_id" value="1234" />
    <input name="child_id" type="hidden" id="child_id" value="abcd" />
    </form>

    <form  name="col_1" id="columnA2" class="col_1"><div>Musician</div>
    <input name="parent_id" type="hidden" id="parent_id" value="5678" />
    <input name="child_id" type="hidden" id="child_id" value="efgh" />
    </form>

我见过使用提交函数的类似线程，但没有使用 click 事件。谢谢

【问题讨论】：

看起来你要提交表单，如果它在任何地方被点击，不确定这是预期的行为，但可能不是你想要的

标签： javascript php jquery ajax forms

【解决方案1】：

您需要使您的选择器具体化，您所拥有的过于通用，以至于它将选择集合中的所有input[name=parent_id] 和val() 将返回集合中第一项的值。

所以改成：

var $this = $(this),
     parent_id = $this.find('input[name=parent_id]').val(),
     child_id = $this.find('input[name=child_id]').val();

另请注意，您可能希望使用submit 事件而不是click 事件。您所拥有的是为表单上的 click 事件注册的事件，当您单击表单内的任何位置时，它将继续调用该事件（除非您真的想这样做）。

您也可以使用serializeObject。它将处理所有表单字段：-

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

你可以这样做：

   $.ajax({
          type:"POST",
          url: "array-2.php",
          data: $(this).serializeObject(),  //This will give you the map                        
          success: function(){
          ...
         }
         ...

Demo

【讨论】：

成功了！非常感谢，花了这么多时间寻找答案。再次感谢！
是的，还需要 5 分钟。谢谢
如何使用$this设置值？

【解决方案2】：

你真的应该使用提交方法而不是点击，每次点击整个表单时你的当前代码都会触发，它应该看起来像这样：

$('.col_1').on('submit', function(e){   // fire on submit
    var form = $(this);
    var parent_id = form.find('input[name=parent_id]').val(); 
    var child_id = form.find('input[name=child_id]').val();
    $.ajax({
       type:"POST",
       url: "array-2.php",
       data:{parent_id: parent_id, child_id: child_id}
    }).done(function(data) {
       $('body').append(data);
    });
    e.preventDefault();
});

【讨论】：

迄今为止我找到的解决此问题的最佳解决方案。非常感谢..即使在将近 2 年后它仍然摇滚。

【解决方案3】：

不要使用表单上的点击。这没有任何意义。

就这样做

<div class="col_1" data-parent_id="1234" data-child_id="abcd">Entrepeneur</div>
<div class="col_1" data-parent_id="5678" data-child_id="efgh">Musician</div>

使用

$(function() {
   $('.col_1').click(function(){  
     var parent_id = $(this).data("parent_id"); 
     var child_id = $(this).data("child_id]");  
     $.post("array-2.php",{parent_id: parent_id, child_id: child_id},
       function(data){
         //do stuff after the AJAX calls successfully completes
         $('body').append(data);
     });
  });
});

【讨论】：