jquery - Ajax post serialize() 不包含按钮名称和值

Question

我的 $.ajax() 没有序列化按钮名称和值。

我有一个非常简单的表格。它有一个按钮和一个文本框。

<form action="/MyController/MyAction" data-ajax-method="post" 
  data-ajax-mode="replace" data-ajax-target="#mypartial" id="myform" 
  method="post">
        <button type="submit" class="positive" name="button" value="click1">
            <img src="/Id/Images/Icons/16/enabled/tick.png" title="click1">
            Click
        </button>
        <input id="txtBlah" name="txtBlah" type="text" value="hello">
    </div>
</form>

当我打电话$(this).serialize()时，文本框包含在字符串中，但不包含按钮。

Debug.Log($(this).attr('id')); //== 'myform'
Debug.Log("data: " + $(this).serialize()); //== data: txtBlah=hello

我在研究过程中注意到，对于其他问题，主要原因是按钮上缺少名称元素。我有一个名称元素。

我也尝试过制作一个非常简单的 <input type="submit" name="mysubmit" />这并没有改变任何东西。

我使用的解决方案

var buttonSubmit = (function (e)
{
    e.preventDefault();
    var form = $(this).closest('form');
    form.attr('data-button-name', $(this).attr('value'));
    form.closest('form').submit();
});

Answer 1

jQuery 的 serialize() 对于不编码按钮或提交输入非常明确，因为它们不被认为是“成功的控件”。这是因为serialize()方法无法知道单击了哪个按钮(如果有!)。

我设法通过捕获按钮单击、序列化表单，然后将所单击按钮的编码名称和值附加到结果中来解决该问题。

$("button.positive").click(function (evt) {
    evt.preventDefault();

    var button = $(evt.target);                 
    var result = button.parents('form').serialize() 
        + '&' 
        + encodeURI(button.attr('name'))
        + '='
        + encodeURI(button.attr('value'))
    ;

    console.log(result);
});