3

我的模板：

{% 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 获取“照片”和“下一个 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 的结果附加到当前页面（加载更多功能）。

4

1 回答 1

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
        }
    });
});
于 2012-12-19T17:57:50.207 回答