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

問題を解決しました！
解決策は、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/

于 2012-04-27T09:24:03.500 に答える
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 に答える