遺漏的類型錯誤：action.serialize不是一個函數

Question

這是我的代碼如下所示：

<form id="form1" method="post"> 
    <div class="row top-buffer"> 
     <div class="col-cs-6 col-md-8"> 
      <input type="param" id="name2" name="value" class="form-control" value="test2"> 
     </div> 
     <div class="col-cxs-6 col-md-4"> 
      <button type='submit' value='test' class='send button btn btn-danger'>Lägg till</button> <!-- changed --> 
     </div> 
    </div> 
</form> 
<form id="form2" method="post"> 
    <div class="row top-buffer"> 
     <div class="col-cs-6 col-md-8"> 
      <input type="param" id="name2" name="value" class="form-control" value="test"> 
     </div> 
     <div class="col-cxs-6 col-md-4"> 
      <button type='submit' value='delist' class='send button btn btn-danger'>Ta bort</button> <!-- changed --> 
     </div> 
    </div> 
</form> 

$(".send").click(function() { 
    var myform = $(this).closest("form"); 
    var sForm = myform.serialize(); 
    var action = $(this).val(); 
    var sAction = $(this).val().serialize();; 

    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: sForm, sAction, 
     success: function(data) { 
      $('#response').html(data); 
     } 
    }); 
    return false; 
}); 

目前我收到以下錯誤：

whitelist.php:67 Uncaught TypeError: action.serialize is not a function(…)

如果我改變data到以下，我沒有得到任何的錯誤，但是，數組被打破。

data: { mySform, 'Param': action }, 

陣列最終這樣看：

Array 
(
    [mySform] => value=test2 
    [Param] => test 
) 

爲了澄清一些事情，我想是該數組看起來像這樣：

Array ([Param] => value [Action] => value) 

，我需要我的jQuery能夠處理超過3種表單。任何幫助將不勝感激，因爲我是jQuery和AJAX的新手。

Answer 1

首先，你是因爲你調用它的字符串得到serialize is not a function錯誤。它打算在jQuery對象中包含的form元素上調用。其次，您需要將單擊按鈕的值附加到從serialize()方法生成的查詢字符串中。

最後，要停止表單提交以正確的方式，你應該掛鉤事件到form元素本身。試試這個：

$("form").submit(function(e) { 
    e.preventDefault(); 
    var $form = $(this); 
    var action = $form.find('.send').val(); 

    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: $form.serialize() + '&action=' + action, 
     // data: $form.serialize() + '&' + $.param({ action: action }) // alternative 
     success: function(data) { 
      $('#response').html(data); 
     } 
    }); 
});