Ajax搜索在django中不起作用

时间:2013-12-17 05:32:56

标签: ajax django

我是django和ajax的新手。我需要进行ajax搜索,所以我执行如下操作:

views.py

def search_titles(request):
    if request.method == "POST":
        search_text = request.POST['search_text']
    else:
        search_text = ''


    articles = Article.objects.filter(title__contains=search_text)
    args = {}
    args.update(csrf(request))
    args['articles'] = articles


    return render_to_response('ajax_search.html',args)

models.py

class Article(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField()
    pub_date = models.DateTimeField('date published')
    likes = models.IntegerField(default=0)  
    thumbnail = models.FileField(upload_to=get_upload_file_name)

    def __unicode__(self):
        return self.title

ajax_search.html

{% if articles.count > 0 %}

{% for article in articles %}
    <li><a href="/articles/get/{{ article.id }}/" >{{article.title}}</a></li>
{% endfor %}

{% else %}

<li> None to show! </li>

{% endif %}

articles.html

{% extends "base.html" %}

{% block sidebar %}
<ul>
    <li><a href="/articles/all">  Articles</a> </li>
    <li><a href="/articles/create">Create Article</a></li>
</ul>

<h3>Search</h3>

{% csrf_token %}

<input type = "text" id="search" name = "search"/>
<ul id ="search-results">

</ul>

{% endblock%}

我也提到了

settings.py

TEMPLATE_DIRS = (
    '/home/bishnu/Documents/python/django-mike/django_test/templates',

    )

STATICFILES_DIRS = (
    '/home/bishnu/Documents/python/django-mike/django_test/static',
)

并且所有模板都是静态文件夹中的文件夹模板和静态文件,我的js文件位于static / js /目录中。

也 的 ajax.js

$(function(){

    $('#search').keyup(function() {

        $.ajax({
            type: "POST",
            url: "/articles/search/",
            data: { 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: searchSuccess,
            dataType: 'html'
        });

    });

});

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data);
}

base.html文件

{% load static %}
<DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}My Base Template{% endblock %}</title>

    <link rel="stylesheet" type="text/css" href="{% static "css/default.css" %}" >
    <script src="{% static "js/ajax.js" %}"> </script>
    <script src="{% static "js/jquery-2.0.0.min.js" %}"> </script>



</head>

<body>
    <div id = "page">

        <div id = "sidebar">
            {% block sidebar %}
            <ul>
                <li><a href="/articles/all/">Articles</a></li>
                <li><a href="/admin/">Admin</a></li>
            </ul>
            {% endblock %}
        </div>
        <div id="content">
            {% block content %}{% endblock %}

            <img src="{% static "images/python_logo.jpg" %}" />
        </div>
    </div>
</body>
</html>

但是ajax无法正常工作,这里有什么问题?

1 个答案:

答案 0 :(得分:0)

这是Mike Hibbert的django tut的一个例子。我认为你的css / js没有加载,因为你把它加载为:

<link rel="stylesheet" type="text/css" href="{% static "css/default.css" %}" >
<script src="{% static "js/ajax.js" %}"> </script>
<script src="{% static "js/jquery-2.0.0.min.js" %}"> </script>

虽然他在https://www.youtube.com/watch?v=jKSNciGr8kY的视频提到你应该把它作为:

<link rel="stylesheet" type="text/css" href="{% static "assets/css/default.css" %}" >
<script src="{% static 'assets/js/jquery-2.0.0.min.js' %}"></script>
<script src="{% static 'assets/js/ajax.js' %}"></script>

我不知道你的静态文件配置是什么。但是请再次按照视频中的说明进行操作,我认为它应该可以正常工作。