forms - jquery/ajax 表单不传递按钮数据

Question

我认为 HTML 规范规定，在表单中单击的按钮会传递其值，而“未单击”按钮则不会被传递。就像复选框一样...我总是检查按钮值，有时我会根据用于提交的按钮进行不同的处理..

我已经开始使用 AJAX(特别是 jquery)来提交我的表单数据 - 但按钮数据从未通过 - 有什么我遗漏的吗？我可以做些什么来传递这些数据吗？

简单的代码可能如下所示

<form id="frmPost" method="post" action="page.php" class="bbForm" >
<input type="text" name="heading" id="heading" />   
<input type="submit" name="btnA" value="Process It!" />
<input type="submit" name="btnB" value="Re-rout it somewhere Else!" />
</form>
<script>
$( function() { //once the doc has loaded   
//handle the forms
$( '.bbForm' ).live( 'submit', function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $( this ).serialize(), // get the form data
        type: $( this ).attr( 'method' ), // GET or POST
        url:  $( this ).attr( 'action' ), // the file to call
        success: function( response ) { // on success..
            $('#ui-tabs-1').html( response );   
        }           
    });
    return false; // cancel original event to prevent form submitting
});
});
</script>

在处理页面上 - 仅显示“标题”字段，无论单击哪个，都不会出现 btnA 或 btnB...

如果无法“修复”，有人可以解释为什么 Ajax 调用不遵循“标准”表单行为吗？

谢谢

Answer 1

我发现这是一个有趣的问题，所以我想我应该深入研究 jquery 源代码和 api 文档。

我的发现:

您的问题与 ajax 调用无关，与 $.serialize() 有关。功能。它根本没有被编码为返回 <input type="submit">甚至 <button type="submit">我都尝试过。有一个正则表达式针对要序列化的表单中的元素集运行，不幸的是它任意排除了提交按钮。

jQuery 源代码(我出于调试目的进行了修改，但所有内容在语义上仍然完好无损):

serialize: function() {
    var data = jQuery.param( this.serializeArray() );
            return data;
},

serializeArray: function() {
   var elementMap = this.map(function(){
        return this.elements ? jQuery.makeArray( this.elements ) : this;
    });

   var filtered = elementMap.filter(function(){
                    var regexTest1= rselectTextarea.test( this.nodeName );
                    var regexTest2 = rinput.test( this.type ); //input submit will fail here thus never serialized as part of the form
        var output = this.name && !this.disabled &&
            ( this.checked || regexTest2|| regexTest2);
                    return output;
    });

    var output = filtered.map(function( i, elem ){
        var val = jQuery( this ).val();

        return val == null ?
            null :
            jQuery.isArray( val ) ?
                jQuery.map( val, function( val, i ){
                    return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                }) :
                { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
    }).get();
    return output;
}

现在检查 jQuery 文档，您满足了它按预期运行的所有要求 (http://api.jquery.com/serialize/):

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

“成功的控制链接分支到 W3 规范，并且您确实确定了规范上的预期行为。

简短蹩脚的回答:我认为它坏了!报告错误修复!!!