jquery-ui - jQuery UI 选项卡 : how to send ajax request with post data?

Question

来自jQuery UI tabs :

<script>
$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Couldn't load this tab.");
            }
        }
    });
});
</script>


<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo.</p>
</div>

在这种情况下如何发送带有发布数据的ajax请求(可能通过ajaxOptions)。

我不知道如何修改选项卡网址来发送帖子数据，例如:

<li><a href="ajax/content1.html(country:1,city:35)">Tab 1</a></li>
<li><a href="ajax/content2.html(code:'aa')">Tab 1</a></li>

谢谢!

已编辑:

在 jQuery 中是:

$.load("some_url",{country: countryValue});

所以我有帖子标题(国家/地区)和帖子值(国家/地区值)。 如何对每个选项卡执行相同的操作？

Answer 1

要使 AJAX 方法 POST，您可以将 type 添加到 ajaxOptions 对象。要收集帖子数据，您可以利用 jQuery.data()，然后隐藏 anchor 中的 POST 参数。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html" data-country="1" data-city="35">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo.</p>
</div>

和 JavaScript:

var postData = {};

$("#tabs").tabs({
    select: function(event, ui) {
        postData = {
            country: parseInt($(ui.tab).data('country')),
            city: parseInt($(ui.tab).data('city'));
        };
    },
    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.");
        }
    }
});

尝试一下:JSFiddle

如果每个链接的参数都发生变化，您就必须想出一种方法来了解您正在寻找哪些参数。您可以使用 ui.index 在 select() 事件中获取选项卡的索引，并使用 switch 获取每种情况的不同参数。诚然，这个解决方案不是很漂亮，但它可以工作。