2

すべての投稿のリストがあります。

def posts_list(request):
    posts = Post.objects.all()
    return render_to_response('posts.html', {'posts':posts},context_instance=RequestContext(request))

テンプレート内:

{% for p in posts %}
    {{ p.name }}
{% endfor %}

名前をクリックすると、この投稿に関するすべての情報を含むボックス (div)Postが表示されます (モデルname, content, date, author:)

jquery(ajax)を使用してそれを行う方法は?

ご関心をお寄せいただきありがとうございます。

4

2 に答える 2

1

追加のビューを追加する必要があります。

新しいビュー:

def post_content(request, post_id):
    post = get_object_or_404(Post, id = post_id)
    return render_to_response('post_info.html', {'post':post},context_instance=RequestContext(request))

投稿に関する詳細情報を提供する post_info.html を作成する必要があります。

投稿テンプレートで：

{% for p in posts %}
     <span data-url='{% url post_content post_id=p.id %}' class='post'>{{ p.name }}<span class='more_info'></span></span>
{% endfor %}

次に、次の Javascript を作成します (この例では Jquery を使用)

$(document).ready( function () {
$('.post').on('click', function() {
    var span = $(this);
    $.ajax({
     url: span.attr('data-url')
    }).done(function(data) {
         span.find('.more_info').html(data);
     });
});
});

これにより、クラス more_info のスパンの内容がサーバーからのデータに置き換えられます。

編集urls.py: set を使用して、ファイルに何かを追加する必要もありますname= "post_content"。

于 2012-10-09T18:09:18.727 に答える
1

template.html:

{% for p in posts %}
    <div class="container"
        data-name="{{ p.name }}"
        data-content="{{ p.content }}">
        {{ p.name }}
    </div>
{% endfor %}

script.js:

$(document).ready(function(){
    $('div.container').click(function(event){
        var name = $(event.target).attr('data-name');
        var content = $(event.target).attr('data-content');
        $.ajax({
            url: 'ajax/test/',
            type: 'POST',
            data: {
                'name': name,
                'content':content
            },
            success: function(data) {
                alert('Load was performed.');
            }
        });
    });
});

ご覧のとおり、モデル フィールドを要素属性 ( data-name=""、...) として格納します。.attr()それらは、 javascript メソッドで取得できます。

次に、すべての div のクリック イベントを でバインドしますclass="container"。スクリプトをクリックすると、以前に保存されたデータが取得され、ajax リクエストが作成されます。Ajax 呼び出しについては、ドキュメントで説明されています。コードはテストされていないため、効率についてはわかりません。

あなたの目標を正しく理解していない場合は、お知らせください

于 2012-10-09T17:57:10.130 に答える