如何從兩種不同的方法提交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}); 
});