4

我认为 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 调用不遵循“标准”表单行为吗？

谢谢

4

2 回答 2

3

我发现这是一个有趣的问题，所以我想我会深入研究一下 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/)：

注意：只有“成功的控件”被序列化为字符串。由于未使用按钮提交表单，因此没有序列化提交按钮值。对于要包含在序列化字符串中的表单元素的值，该元素必须具有 name 属性。来自复选框和单选按钮（“单选”或“复选框”类型的输入）的值仅在它们被选中时才被包括在内。来自文件选择元素的数据未序列化。

“成功的控制链接分支到 W3 规范，您肯定在规范中确定了预期的行为。

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

于 2012-07-31T06:54:45.423 回答
0

我遇到了一个相当不寻常的问题。我正在开发一个项目，并且有两个单独的 php 页面，其中一个页面上的 html 与 php 代码分开，一个是从 php 代码内部回显 html。当我在具有单独 html 代码的那个上使用 .serialize 时，它​​可以正常工作。它在它的 ajax 调用中将我的提交按钮值发送到另一个 php 页面。但是在从 php 脚本回显的 html 中，我尝试做同样的事情并得到完全不同的结果。它将发送表单中的所有其他信息，但不发送提交按钮的值。我需要做的就是发送我是否按下“删除”或“更新”。一世' 我没有寻求帮助（违反了在其他人的帖子上寻求帮助的规则），但我认为此信息可能有助于找出故障发生的位置。我会寻找解决方案，如果我发现任何问题，我会在这里发帖。

于 2013-06-19T20:12:39.107 回答