如何从两种不同的方法提交jQuery表单

Question

我有一个jQuery表单POST需要根据从以下代码中注释检索的3个值提交的方法作为PostData。

如何将这三个变量传递给表格submit方法？它们遍历一个each函数，我不知道如何将它作为一个数组传递以及如何发布这些数据。

$(document).ready(function() { 
    var table = $('#example').DataTable(); 

    $('#example tbody').on('click', 'tr', function() { 
     $(this).toggleClass('selected'); 
    }); 

    $('#button').click(function() { 
     //var i = 0;             
     //Commented out = increment and return whole row 
     $('.selected').each(function() { 
      alert($(this).find(":selected").text()); //Post Data 
      alert($(this).find('input:text').val()); //Post Data 
      alert($(this).attr('value')); //PostData 

      // alert(table.rows('.selected').data()[i]); 
      //i++; 
     }); 
    }); 

    $("form").submit(function (e) { 

     e.preventDefault(); 
     var postData = val 
     var postData2= val2 
     var postData3=val3 
     $.ajax({ 
      type: "POST", 
      url: "/Home/Index", 
      data: JSON.stringify({ pd: postData, ta: val2, tb: val3 }), 
      success: function (data) { 
       alert("Success"); 
       submit(); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }) 
}) 

function submit() { 
    $("form").unbind('submit').submit(); 
} 

Answer 1

你的例子过于复杂和混乱。你试图实现的其实很简单。你不必传递任何东西来获得你的价值观。您可以在按钮点击侦听器回调方法中做同样的事情。

我会从分离关注开始。隔离AJAX调用和解除绑定方法：

function postTheData(postData) { 
    $.ajax({ 
    type: "POST", 
    url: "/Home/Index", 
    data: JSON.stringify(postData), 
    success: function (data) { 
     alert("Success"); 
     unbind(); 
    }, 
    error: function() { 
     alert("error"); 
    } 
    }); 
} 

function unbind() { 
    $("form").unbind('submit').submit(); 
} 

然后，尝试意识到这些是侦听器寄存器。您正在将操作附加到DOM事件。当按下按钮时，或者表单被提交时，将会调用这两个函数中的一个。您以相同的方式获取每个数据。提交表单不会为该方法添加任何特殊的参数。您仍然必须自己提取表单数据。

另外，从您的问题来看，还不太清楚.each方法的用途。如果没有看好你的标记，很难说出你要做什么。但是，我只想说，你会提取相同的方式从输入的数值为每个个案：

// this is called when the button is clicked 
$('#button').click(function() { 
    var val1, val2, val3; 
    $('.selected').each(function() { 
    val1 = $(this).find(":selected").text(); //Post Data 
    val2 = $(this).find('input:text').val(); //Post Data 
    val3 = $(this).attr('value'); //PostData 
    }); 

    postTheData({pd: val1, ta: val2, tb: val3}); 
}); 

// this is called when the form is submitted (by pressing enter inside an input, or pressing the "submit" button) 
$("form").submit(function (e) { 
    var val1, val2, val3; 
    e.preventDefault(); 
    //just get the values the same way 
    $('.selected').each(function() { 
    val1 = $(this).find(":selected").text(); //Post Data 
    val2 = $(this).find('input:text').val(); //Post Data 
    val3 = $(this).attr('value'); //PostData 
    }); 
    postTheData({pd: val1, ta: val2, tb: val2}); 
});