的jquery / AJAX形式没有通过按键数据(jquery / ajax form not pa

2019-09-20 12:11发布

我认为HTML规范指出,按钮的形式通过点击自己的价值,而按钮“未点击”没有获得通过。 复选框类似......我总是检查按钮值,有时我会做,这取决于使用按钮提交不同的处理..

我一直在使用AJAX(特别jQuery的)提交我的表单数据开始 - 但按钮的数据不会传递 - 有我丢失的东西? 在那里soemthing我能做些什么来传递这些数据呢?

简单的代码可能是这样的

<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/):

注意:只有“ 成功控制 ”被序列化到字符串。 没有提交因为形式是不使用按钮提交按钮值序列化。 对于要包含在序列化的字符串形式元素的值,该元素必须有一个name属性。 从复选框和单选按钮的值,只有当他们被检查被包括(类型“无线电”或“复选框”的输入)。 从文件中选择元素,数据是不会被序列化。

在“成功控制链接分支出来的W3规范,你绝对钉在规范预期的行为。

短跛脚回答:我认为这是德坏了! 对于bug修复报告!



Answer 2:

我碰到这个是相当不寻常的问题。 我工作的一个项目,有两个单独的PHP页面,其中一个有网页与PHP代码分开的HTML和一个从PHP代码里回荡HTML。 当我使用.serialize上具有独立的HTML代码,它工作正常的一个。 它发出我在Ajax调用提交按钮值到另一个PHP页面。 但在一个从PHP脚本呼应的HTML我尝试做同样的事情,并得到完全不同的结果。 它会发送所有形式的其他信息,但不是提交按钮的值。 所有我需要做的是送我是否将推“删除”或“更新”。 我不寻求帮助(违反规则寻求帮助另一个人的帖子),但我认为这个信息可能是在搞清楚击穿发生有帮助。 我将寻找一个解决方案,将回到这里后,如果我想任何东西了。



文章来源: jquery / ajax form not passing button data
标签: forms jquery