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获取每种情况的不同参数。诚然，这个解决方案不是很漂亮，但它可以工作。