0

我有一个 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 参数。有人有任何提示吗？

4

2 回答 2

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

于 2012-04-27T08:42:59.980 回答
1

我解决了这个问题！
解决方案是在选择事件上重置 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/

于 2012-04-27T09:24:03.500 回答