jQuery UI选项卡:如何发送带有发布数据的Ajax请求? [英] jQuery UI tabs: how to send ajax request with post data?
问题描述
从 jQuery UI选项卡:
<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>
在这种情况下(可能通过ajaxOptions)如何发送带有帖子数据的 ajax请求.
How to send ajax request with post data in this case (maybe through ajaxOptions).
我不知道如何修改标签网址以发送帖子数据,例如:
I do not know how to modify tabs urls to send post data, for example:
<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中,它是:
In jQuery it's:
$.load("some_url",{country: countryValue});
所以我有帖子标题(国家)和帖子值(countryValue). 每个标签如何做?
So I have post header (country) and post value (countryValue). How to do the same with each tab?
推荐答案
要使AJAX方法成为POST,可以将type
添加到ajaxOptions
对象.要收集帖子的数据,可以利用jQuery.data()
的优势,然后将POST参数隐藏在锚点中.
To make the AJAX method POST, you can add a type
to the ajaxOptions
object. To collect data for the post, you could take advantage of jQuery.data()
and then hide the POST parameters in the anchor.
<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:
And the 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
Try it: JSFiddle
如果每个链接的参数都发生变化,则必须想出一种方法来知道要查找的参数.您可以使用ui.index
获取select()
事件中选项卡的索引,并使用switch
获取每种情况下的不同参数.诚然,这种解决方案不是很好,但是它可以工作.
If your parameters change for each link, you'll have to come up with a way to know which parameters you're looking for. You could get the index of the tab in the select()
event using ui.index
and use a switch
to get different parameters for each case. Admittedly this solution isn't very pretty, but it could work.
这篇关于jQuery UI选项卡:如何发送带有发布数据的Ajax请求?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!