0

ページを 2 つの部分に分けて読み込もうとしています。2番目の部分は、ユーザーが「詳細を表示」をクリックしたときにのみレンダリングされます

<script>
$(document).ready(function(){
    $('#toggle_details').click(function(e){
        e.preventDefault();
        if ($(this).hasClass('up')){
            $(this).removeClass('up').addClass('down');
            $('#toggle_text').html('Show More Details');
        }
        else {
            $(this).removeClass('down').addClass('up');
            $.ajax({
                url: 'some_url_returning_json',
                data: $(this).serialize(),
                processData: false,
                dataType: "json",
                success: function(data) {
                    $( '.name' ).html(data.name);
                    $( '.lname' ).html(data.lname);
                    alert(data.name);
                }
            })
            $('#toggle_text').html('Hide Details');
        }
        $('#details').slideToggle("slow");
        return false;
    });
    $('#details').hide();
});    
</script>

私のhtmlは次のとおりです。

<div class="ad-grp-tbl creative-tbl custom-tbl">
    <table width="100%">
        <tr>
            <th>Status:</th>

            <td id='status'>{{ status }}</td>
        </tr>
    </table>
    <table width="100%" id="details">
        <tr>
            <th>Name:</th>
            <td id="name" >{{data.name}}</td>
        </tr>

        <tr>
            <th>Last Name:</th>
            <td id ="lname">{{ data.lname}}</td>
        </tr>
    </table>
    <table>
        <tr>
            <th class="tog">
                <span id="toggle_text" style="color:blue;font-weight:bold">Show More Details</span>
                <span class="down" id="toggle_details"></span>
            </th>
            <td></td>
        </tr>
    </table>
</div>

したがって、基本的に、テンプレートに json の戻り値を読み込むことができません。どうすれば修正できますか。または、問題を解決するための私のアプローチが間違っています。

ありがとう。

4

3 に答える 3

1

例を示します。

def post_ajax(request):
    TOTLE = 5
    OFFSET = int(request.GET.get('offset', 0))
    END = OFFSET + TOTLE

    if OFFSET + 1 >= Post.objects.count():
        LOADED = "已经全部加载完毕"
        return HttpResponse(LOADED)
    posts = Post.objects.filter(pub_time__lte=timezone.now())[OFFSET:END]

    json_list = []
    for post in posts:
        t = get_template('blog/ajax_post.html')
        html = t.render(Context({'post': post}))
        # print(html)
        json_list.append({
            'html': html,
        })
    data = json.dumps(json_list)
    return HttpResponse(data, content_type="application/json")

これは必要ですか？

于 2016-03-05T12:54:48.320 に答える
0

Ajax + JQuery は応答を取得し、ページに適切にデータを配置する必要があります。元のページのテンプレートが果たす役割はあまりありません。

ただし、ajax リクエストを処理する個別の url+view+template を実装する必要があります。既存のビューを使用できますが、ajax リクエストを処理する必要があります (つまり、html の一部を送信するだけで、別のテンプレートを使用する可能性があります)。

ajax 応答のテンプレートは、html ページ全体ではなく、html の関連部分のみを送信する必要があります。

于 2012-07-07T06:01:06.350 に答える
0

HTML では ID が設定されていますが、クラス セレクターを使用しています。

そのはず：

$( '#name' ).html(data.name);
$( '#lname' ).html(data.lname);

それ以外の：

$( '.name' ).html(data.name);
$( '.lname' ).html(data.lname);

.はクラス セレクターで#あり、id セレクターです。

Firebug または Chrome Dev Tools を使用して、上記の項目が返されることを確認できます。

于 2012-07-16T23:32:02.867 に答える