django:ajax渲染到模板

时间:2012-12-19 17:08:44

标签: jquery ajax django

我的模板:

{% block content %}
    {% if next_url %}
        <ul class="pager">
            <li><a href="{{ next_url}}">Next</a></li>
        </ul>
    {% endif %}
    {% if photos %}
        {% for photo in photos %}
            <div class="span3" >
                <p>
                    <a href="http://instagram.com/{{ photo.user.username }}"><img src="{{ photo.user.profile_picture }}" width="35" height="35"></a> <a href="http://instagram.com/{{ photo.user.username }}">{{ photo.user.username }}</a>
                    <span class="info_down">[ <a href="{{ photo.images.thumbnail.url }}">T</a> | <a href="{{ photo.images.standard_resolution.url }}">M</a> | <a href="{{ photo.images.low_resolution.url }}">L</a> | <a href="{{ photo.link }}">O</a> ]</span>
                </p>
                <p>
                    <img src="{{ photo.images.low_resolution.url }}">
                </p>
                <p>
                    <i class="icon-heart"></i> {{ photo.l }}
                </p>
                <p>
                    <i class="icon-time"></i> {{ photo.created_time }} <a style="float:right;" href="http://maps.google.com.ua/maps?q={{ photo.location.point.latitude }}+{{ photo.location.point.longitude }}"><i class="icon-map-marker"></i>  Map</a>
                </p>
            </div>

        {% endfor %}
    {% else%}
        <p>empty ;(</p>
    {% endif %}
{% endblock %}

{% block pagination %}
    {% if next_url %}
        <div class="span12" >
            <ul class="pager">
                <li>
                    <a href="{{ next_url}}">Next</a>
                </li>
            </ul> 
        </div>
    {% endif %}
{% endblock %}

有一个观点,通过外部API获取'photos'和'next_url'并进行一些更改:

def tag(request, tag):
    api = InstagramAPI(client_id='', client_secret='')
    tag_m, next = api.tag_recent_media(tag_name=tag.encode('utf-8'), count=16)
    photos = photos + tag_m

    if next != None:
        ....
        next_url = ....

    ....
    for photo in photos:
    ....

    return render_to_response(
        'tag.html',
        {'photos': photos, 'next_url': next_url},
        context_instance=RequestContext(request))

如何通过ajax动态显示此数据?我想将next_url的结果附加到当前页面(加载更多功能)。

1 个答案:

答案 0 :(得分:2)

这就是你要做的:点击后,你可以触发[ajax][1]提交。成功后,您将获得附加到div的HTML。

$('.span12 .pager li a').click(function(){
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        success: function(data, status, xhr){
           // append the response data in the HTML
        }
    });
});