发布数据 JQuery UI Tabs 1.10答案

【问题标题】：Post data JQuery UI Tabs 1.10发布数据 JQuery UI Tabs 1.10
【发布时间】：2013-01-23 13:24:09
【问题描述】：

我刚刚从 JQ UI 1.8.23 切换到 1.10。 至于这个版本，ajaxOptions 已弃用，现在使用 ui.ajaxSettings 代替。

这就是我的代码的样子：

$( "#tabs" ).tabs({
        ajaxOptions: {
            type : 'POST',
            data : 'format=html',
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo. " );
            },
            success: function() { 
                *Something in here*
            }
        }
    });

一切正常。现在新代码：

$( "#tabs" ).tabs({
         beforeLoad: function( event, ui ) {
             ui.ajaxSettings.type = 'POST';
             ui.ajaxSettings.data = 'format=html';
             ui.jqXHR.error(function() {
                 ui.panel.html(
                 "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                 "If this wouldn't be a demo." );
                });  
             ui.jqXHR.success(function(){
*something in here*
                });
        }
    });

所以我需要将此数据format=html 发布到我的服务器，但是使用新版本，我发送到服务器的发布变量是空的。没有任何东西发送到服务器。另外，如果我想在php script 中获取 POST 变量，则数组为空。我正在使用ZEND 顺便说一句。我需要通过 POST 发送它 - 没有办法解决它。

感谢您的帮助

【问题讨论】：

你解决了吗？我已经搜索过，似乎没有解决方案。看起来 UI-Tabs 设计有一个重要功能 - 添加后期数据的能力 - 被忽略了！
bugs.jqueryui.com/ticket/8673

标签： jquery jquery-ui zend-framework post

【解决方案1】：

如果您查看jQuery.ajax 的源代码，在第 486 行您会看到它将数据添加到 url。然后在第 532 行调用 beforeSend 方法，该方法触发 jQuery UI 选项卡中的 beforeLoad 事件。

所以你需要做的就是修改 url 而不是数据：

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.ajaxSettings.type = 'POST';
        ui.ajaxSettings.url += ( /\?/.test( ui.ajaxSettings.url ) ? "&" : "?" ) + 'format=html';
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
        });  
        ui.jqXHR.success(function(){
            *something in here*
        });
    }
});

【讨论】：

【解决方案2】：

我也有同样的问题。我已经测试过了：

ui.ajaxSettings.url += ( /\?/.test( ui.ajaxSettings.url ) ? "&" : "?" ) + 'format=html';

但它是 GET 类型而不是 POST。

我试过了：

ui.ajaxSettings.format = 'html';

但帖子中没有任何变量。

所以我试过了：

 ui.ajaxSettings.data = { format:'html' };

帖子中不再有变量。

【讨论】：

数据需要在 beforeLoad 之前进行处理。来自 API 文档：注意：虽然提供了 ui.ajaxSettings 并且可以修改，但其中一些设置已经由 jQuery 处理。例如，已应用预过滤器，已处理数据，已确定类型。 beforeLoad 事件同时发生，因此具有与 jQuery.ajax() 的 beforeSend 回调相同的限制。

【解决方案3】：

感谢Christian Seifert 发布这个问题，感谢PetersenDidIt 提供好的答案！这是我对同样问题的 ajax 实现，希望这段代码 sn-p 能帮助到那里的人！

    $("#tabs").tabs({
        beforeLoad: function(event, ui) {
            var url = window.location.protocol + "//" + window.location.hostname + "/ajax";
            var data = {name: "job", value: "Rock Star"};

            ui.ajaxSettings.type = 'GET';
            ui.ajaxSettings.url = url  + "?" + $.param(data, false);

            //console.log(ui.ajaxSettings.url);
            ui.jqXHR.fail(function() {
                ui.panel.html('Couldn't load this tab!');
            });
        }
    });

另外，请注意您正在覆盖哪些 jqXHR 方法，最新的 Jquery UI（版本 1.11.4）不再使用折旧的方法。

https://github.com/scottgonzalez/jquery-ui/commit/e3f94a87dc312c2225e9ebe7231d868820bd6150

【讨论】：