Question

我有一个jQuery Ajax标签：

<div id='tabs'>
    <ul>
        <li><a href="/echo/html/?html=1">Tab1</a></li>
        <li><a href="/echo/html/?html=2">Tab2</a></li>
        <li><a href="/echo/html/?html=3">Tab3</a></li>
        <li><a href="/echo/html/?html=4">Tab4</a></li>
    </ul>
</div>

$('#tabs').tabs({
    ajaxOptions:{
        type: 'post',
        data:{
            html:'<p>sample html content</p>'
        }
    }
});

jsFiddle演示

我成功将默认的ajax GET请求转换为POST请求，现在我想要的是使（HTML）GET参数成为POST参数。有人有任何提示吗？

Answer 1

您好，您可以在每个标签中指定“数据”字段，您可以在ajax帖子中使用它;

<div id='tabs'>
    <ul>
        <li><a href="/echo/html/" data-html="1">Tab1</a></li>
        <li><a href="/echo/html/" data-html="2">Tab2</a></li>
        <li><a href="/echo/html/" data-html="3">Tab3</a></li>
        <li><a href="/echo/html/" data-html="4">Tab4</a></li>
    </ul>
</div>

var postVars = {};
$('#tabs').tabs({
    select: function(event, ui) {
        postVars = {
            param: $(ui.tab).data('html'),
        };
    },
    ajaxOptions:{
        type: 'post',
        data:postVars,
        error: function(xhr, status, index, anchor) {
            alert("Error occured");
        }
    }
});

您可以查看jsfiddle演示

Answer 2

我解决了这个问题！解决方案是重置select事件的ajaxOptions！现在它可以工作

<div id='tabs'>
    <ul>
        <li><a title="1" href="/echo/html/" data-html="1">Tab1</a></li>
        <li><a title="2" href="/echo/html/" data-html="2">Tab2</a></li>
        <li><a title="3" href="/echo/html/" data-html="3">Tab3</a></li>
        <li><a title="4" href="/echo/html/" data-html="4">Tab4</a></li>
    </ul>
</div>

$('#tabs').tabs({
    select: function(event, ui) {        
        var postVars = {
            html: $(ui.tab).attr('title'),
        };
        $(ui.tab).parent().parent().parent().tabs( "option", "ajaxOptions", { type:'post', data:postVars } );
    },
    ajaxOptions:{
        type: 'post',
        data:{
            html:$('#tabs a:first').attr('title')
        },
        error: function(xhr, status, index, anchor) {
            alert("Error occured");
        }
    }
});

演示：http://jsfiddle.net/9pJ9e/7/

jQuery UI选项卡，将GET参数转换为POST参数

2 个答案: