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

serialize()关于NOT编码按钮或提交输入,jQuery 非常明确,因为它们不被认为是"成功的控件".这是因为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);
});

Answer 2

这是一个万能的解决方案，它将在按钮的包含表单中寻找输入。如果存在，它将设置该值，否则将创建一个隐藏的输入并设置其值。如果您不想立即提交表单，这也很有用。

$(document).on('click', '[name][value]:button', function(evt){
    var $button = $(evt.currentTarget),
        $input = $button.closest('form').find('input[name="'+$button.attr('name')+'"]');
    if(!$input.length){
        $input = $('<input>', {
            type:'hidden',
            name:$button.attr('name')
        });
        $input.insertAfter($button);
    }
    $input.val($button.val());
});