使用 Jquery 选项卡通过 ajax 传递变量答案

【问题标题】：Passing variable via ajax with Jquery Tabs使用 Jquery 选项卡通过 ajax 传递变量
【发布时间】：2012-09-20 20:57:04
【问题描述】：

我遇到了一个困扰了好几天的问题，但我似乎无法弄清楚。我正在尝试使用 Jquery Tabs 通过 AJAX 传递变量。

这是我的使用场景：用户加载带有 JQuery 选项卡的页面，默认只是一些文本。在页面上，我有一个包含用户 ID 的会话变量。当他们单击第二个选项卡时，它将该用户 ID 变量传递给脚本。我不能让它通过！

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" href="js/css/smoothness/jquery-ui-1.8.23.custom.css" />
<script>
var postData = {};
$("#tabs").tabs({
select: function(event, ui) {
    postData = {
        userid: parseInt($(ui.tab).data('userid'));
    };
},
ajaxOptions: {
    type: 'POST',
    data: postData,
    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.");
    }
}
});
</script>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Intro</a></li>
    <li><a href="Custom/div_charts_test2.html" data-userid="1234">Department</a></li>
</ul>
<div id="tabs-1">
    <p>Text information goes here</p>
</div>
</div>

【问题讨论】：

大声笑，实际上，您的代码看起来像这样的副本：stackoverflow.com/questions/8301193/… ... 这对您不起作用吗？您是否在开发者工具的“网络”选项卡中检查了该请求，以查看它是否已发出以及您得到了什么响应？
是的，我看到了那个帖子，但似乎没有帮助！检查网络选项卡时，我看到正在发布的帖子，它只是空白
你是在服务器上运行它吗？如果它在 file:// 上运行，那么它不会“发布”并且你会得到一个错误。但是你应该已经在 chromes 网络标签skitch.shanimal.com/…看到错误了

标签： jquery jquery-ui jquery-tabs

【解决方案1】：

我在 IE 和 Firefox 中都尝试了一个测试代码，它似乎工作得很好。

Test.html

  <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>jQuery UI Example Page</title>
            <link type="text/css" href="css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
            <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <script>
                var postData;
                var datavalue;
                $(function(){
                    $('#tabs').tabs(
                        {
                            select: function(event, ui) {
                                datavalue = parseInt($(ui.tab).data('userid')); 
                                postData = {
                                     userid:datavalue
                                };
                            },
                            ajaxOptions: {
                                type: 'POST',
                                data: postData,
                                dataType: 'html',
                                complete: function(xhr, status, index, anchor) {
                                    //alert(postData.userid);
                                },
                                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.");
                                }
                            }
                        }
                    );
                });
    </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Intro</a></li>
                <li><a href="Department.html" data-userid="1234">Department</a></li>
            </ul>
            <div id="tabs-1">
                <p>Text information goes here</p>
            </div>
        </div>
    </body>
    </html>

部门.html：

             This is my department page.

我在前两行进行了更改（变量声明：修改了 postData 并添加了一个新变量来保存用户 ID 值）。修改了分配给“选择”的功能。这似乎有效，因为我能够通过 ajaxOptions 的“错误”功能中的警报来验证用户 ID。

希望这会有所帮助。如果没有，请告诉我。

【讨论】：

感谢您的回复！我尝试了您的建议，但我似乎无法发布它，即使在 Firebug 中查看它也是如此。我什至尝试在 type 下添加 url:custom/div_charts_test2.html ，但它仍然不会传递该变量。有任何想法吗？ ://
我尝试在 Firefox(14.0.1) 和 iExplorer(7.0+) 中使用虚拟页面进行验证：Department.html。它似乎工作正常。我用完整的测试代码更新了上面的答案。

【解决方案2】：

更改您的选择函数以设置 ajaxOptions。

select:function(event, ui) {
    $("#tabs").tabs("option", "ajaxOptions",{
        type: 'POST',
        data: {userId:$(ui.tab).data('userid')},
        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.");
        }
    })
},

当您最初定义 ajaxOptions 时，它会将此值用于任何后续请求。但由于某种原因，它没有得到当前值。我什至尝试仅更改 select 上的 userId 并且无法修改它。他们可能正在克隆价值，我不确定。无论如何，如果您在请求之前设置 ajaxOptions，它将发送您想要的。

对不起，半生不熟的答案，但我不能放过它。 +1关于这个问题。我不得不做一些研究来弄清楚为什么它不起作用。

注意：您可能已经知道这一点，但您必须在服务器上运行才能进行 POST。 POST 到本地文件系统会产生错误。

【讨论】：

还有一件事。您的服务器是否设置为处理 .html 扩展名？我将第二个选项卡中的 url 指向一个 php 文件，其中包含以下内容 <?php echo "<p>HELLO WORLD {$_REQUEST['userId']}</p>"; 它打印了“HELLO WORLD 1234”

【解决方案3】：

$( "#tabs" ).tabs({
        beforeLoad: function (event, ui) {

            ui.jqXHR.fail(function() {
                ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible."
                    );
            });

            var tabID = ui.tab[0].id;

            if (tabID == "tab1") {
                ui.ajaxSettings.url = 'ControllerName/Action/' + $('#drpDwnVal').val();
            }

            if (tabID == "tab2") {
                ui.ajaxSettings.url = 'ControllerName2/Action2/' + $('#drpDwnVal').val();
            }

        }
    });

【讨论】：

希望这很有用，但我找到了一种方法来拦截和设置 Ajax 调用 URL，并根据单击的选项卡进行更改。