Django: Jquery点击函数在Ajax中不工作

Question

我一直在做《Tango with Django》的练习，想要学习Django。快完成了，但在Ajax部分遇到了一些问题。

用来自动添加页面的Ajax函数没有被调用。我不知道问题出在哪里，因为其他的函数都能正常调用。在命令行提示符下，根本没有调用到这个ajax函数。需要帮助。

相关的代码附在下面。和上面网站链接上的代码是一样的。

static/rango-ajax.js

  $('.rango-add').click(function(){
      var catid = $(this).attr("data-catid");
      var title = $(this).atrr("data-title");
      var url = $(this).attr("data-url");
      $.get('/rango/auto_add_page/', {category_id: catid, url: url, title: title}, function(data){
          $('#pages').html(data);
          me.hide();
      });
  });

templates/rango/category.html

{% if user.is_authenticated %}
    <button data-catid="{{category.id}}" data-title="{{ result.title }}" data-url="{{ result.link }}" class="rango-add btn btn-mini btn-info" type="button">Add</button> 
{% endif %}

rango/views.py

@login_required
def auto_add_page(request):
    context = RequestContext(request)
    cat_id = None
    url = None
    title = None
    context_dict = {}
    if request.method == 'GET':
        cat_id = request.GET['category_id']
        url = request.GET['url']
        title = request.GET['title']
        if cat_id:
            category = Category.objects.get(id=int(cat_id))
            p = Page.objects.get_or_create(category=category, title=title, url=url)
            pages = Page.objects.filter(category=category).order_by('-views')

            #Adds our results list to the template context under name pages. 
            context_dict['pages'] = pages

    return render_to_response('rango/page_list.html', context_dict, context)

rango/urls.py

urlpatterns = patterns('', 
        url(r'^$', views.index, name='index'),
        url(r'^goto/$', views.track_url, name='track_url'),
        url(r'^add_category/$', views.add_category, name='add_category'),
        url(r'^auto_add_page/$', views.auto_add_page, name='auto_add_page'),

完整的代码可以在这个链接找到。

相关问题：

• Django，使用Ajax更新页面
• 通过AJAX POST数据无法访问Django视图
• Django中的Jquery
• 使用AJAX执行Python Django脚本
• 如何在Django模板中从JQuery脚本调用Python函数
• Django + jQuery + Ajax
• 用jQuery显示新的Django对象
• Django中使用jQuery的AJAX相当混乱

Answer 1

我现在正在学习这个教程的部分，想补充一下Héctor的回答。为了避免重复代码来显示页面列表，我做了以下操作：

我在tango/rango/templatetags/rango_extras.py中添加了一个叫get_page_list()的方法，这个方法和之前教程中用来显示分类列表的get_category_list()方法类似。

from rango.models import Page

@register.inclusion_tag("rango/page_list.html")
def get_page_list(category):
    pages = Page.objects.filter(category=category) if category else []
    return {'pages': pages}

然后我们只需要在tango/templates/rango/category.html中加载rango_extras，并调用get_page_list()方法。

{% extends 'rango/base.html' %}

{% load rango_extras %}

<!-- Existing code -->

{% if category %}

    <!-- Existing code to show category likes and like button -->

    <div id="page_list">
        {% get_page_list category %}
    </div>

    <!-- Existing code to show search if user is authenticated -->

{% else %]
    The specified category {{ category_name }} does not exist!
{% endif %}

这样，当分类页面第一次加载时，就可以显示页面列表，如果在搜索区域添加了分类，还可以刷新这个列表，而不需要重复任何代码。

Answer 2

你的代码写得不错，唯一需要做的就是在 /tango/templates/rango/page_list.html 里定义你的模板。这个模板需要包含以下代码：

 {% if pages %}
<ul>
{% for page in pages %}
   <li>
   <a href="{% url 'goto' %}?page_id={{page.id}}"> {{ page.title}}</a>
   {% if page.views > 1 %}
      ({{page.views}} views)
   {% elif page.views == 1 %}
      ({{page.views}} view)
   {% endif %}
   </li>
{% endfor %}
</ul>
{% else %}
   <strong> No Pages currently in category. </strong>
{% endif %}

在你的分类模板里面，你还需要定义以下代码：

% if category %}
    {% if user.is_authenticated %}
        <a href="/rango/category/{{ category_name_url }}/add_page/"> Add a new Page</a> <br>
    {% endif %}
    {% if pages %}
    <div id="pages">
        <ul>
        {% for page in pages %}
            <li>
                <a href="{% url 'goto' %}?page_id={{page.id}}"> {{ page.title}}</a>
            {% if page.views > 1 %}
                ({{page.views}} views)
            {% elif page.views == 1 %}
                ({{page.views}} view)
            {% endif %}
            </li>
        {% endfor %}
        </ul>
     </div>
    {% else %}
        <strong> No Pages currently in category. </strong>
    {% endif %}
{% else %}
    The specified category {{ category_name }} does not exist!
{% endif %}