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);
});

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());
});

Answer 3

我喜欢@slashingweapon的approach，但为什么不更短呢？

$("button.positive").click(function () {
    var result = $(this).parents('form').serialize() 
        + '&' 
        + this.name
        + '='
        + this.value
    ;
    console.log(result);

    return false; // prevent default
});

仅当服务器生成非ASCII按钮名称或值时，才会这样：

$("button.positive").click(function () {
    var result = $(this).parents('form').serialize() 
        + '&' 
        + encodeURI(this.name)
        + '='
        + encodeURI(this.value)
    ;
    console.log(result);

    return false; // prevent default
});

Ajax post serialize（）不包括按钮名称和值

3 个答案: