我的模板:
{% 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的结果附加到当前页面(加载更多功能)。
答案 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
}
});
});