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

模板.html：

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

脚本.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 回答
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 的 span 的内容。

编辑：你还需要在你的urls.py文件中添加一些东西，name= "post_content"设置。

于 2012-10-09T18:09:18.727 回答