jQuery UI選項卡：如何發送帶有發佈數據的ajax請求？

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> 

如何與發送POST數據在這種情況下Ajax請求（可能通過ajaxOptions）。

我不知道如何修改標籤URL發送POST數據，例如：

<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> 

謝謝！

EDITED：

在jQuery的是：

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

所以，我必須交頭（國家）和崗位價值（countryValue）。 如何對每個選項卡執行相同操作？

Answer 1

要製作AJAX方法POST，您可以將type添加到ajaxOptions對象。要收集帖子的數據，您可以利用jQuery.data()，然後隱藏錨點中的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獲取每種情況的不同參數。誠然，這個解決方案不是很漂亮，但它可以工作。