Ajax搜索在Django中不起作用

Bishnu Bhattarai 发表于 Dev

比什努·巴塔莱

我是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 %}

article.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无法正常工作，这是什么问题？

索拉·希拉尼（Saurabh Hirani）

这是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>

我不知道您的staticfiles配置是什么。但是请再按一次视频中的说明，我认为它应该像对我一样起作用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。