Question

我列出了所有帖子：

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）？

感谢您的关注。

Answer 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方法检索它们。

然后我为class="container"的所有div绑定click事件。点击脚本检索以前存储的数据并发出ajax请求。 Ajax调用在documentation中描述。代码尚未经过测试，因此我无法确定它的效率。

如果我没有正确理解你的目标，请告诉我

Answer 2

您需要添加其他视图：

新观点：

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的{{1}}文件中添加内容。

Django的。使用Ajax显示数据

2 个答案: