Django 1.5.4 专题12 Ajax search 功能

最新推荐文章于 2021-08-05 14:50:59 发布

wcc526

最新推荐文章于 2021-08-05 14:50:59 发布

阅读量1.9k

点赞数

分类专栏： Django Django 1.5.5 文章标签： Django

本文链接：https://blog.csdn.net/wcc526/article/details/12650491

版权

Django 同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

Django 1.5.5

51 篇文章 1 订阅

订阅专栏

Ajax的基本知识

1.发送GET请求

var xml=new getXmlHttpRequest();    //创建XHR对象
xml.open("GET","/web/url.php?"+data,true);  //初始化请求
xml.send();     //与服务器建立连接并发送数据

2.发送POST请求

var xml=new getXmlHttpRequest();    //创建XHR对象
para    ="id=11&username=cnn4ry&password=123456";  //发送数据
xml.open("POST","/web/login.php?",true);        //初始化异步POST请求
xml.setRequestHeader("Content-Type","application/x-www-form-urlencode");    //设置content-type首部,告知服务器如何解析发送的数据
xml.send(para);     //发送数据

一.修改article/ulrs.py的内容如下

from django.conf.urls import patterns,include,url

urlpatterns = patterns('',
        url(r'^all/$','article.views.articles'),
        url(r'^get/(?P<article_id>\d+)/$','article.views.article'),
        url(r'^language/(?P<language>[a-z\-]+)/$','article.views.language'),
        url(r'^create/$','article.views.create'),
        url(r'^like/(?P<article_id>\d+)/$','article.views.like_article'),
        url(r'^add_comment/(?P<article_id>\d+)/$','article.views.add_comment'),
        url(r'^search/$','article.views.search_titles'),
        )

二.在article/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)
   
    return render_to_response('ajax_search.html',{'articles':articles})

三.在article/templates/ajax_search.html写入以下内容

{% if articles.count > 0 %}
{% for article in articles %}
<li><a href="/articles/get/{{aticle.id}}"> {{article.title}} </a></li>
{% endfor %}
{% else %}
<li>None to show! </li>

{% endif %}

四.修改article/templates/articles的内容如下

{% extends "base.html" %}
{% load article_tags %}

{% 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 %}

{% block content %}

<h2>Language is: {{language}}</h2>

<h2>Session Language is: {{session_language}}</h2>

{% if articles.count > 0 %}

{% for article in articles %}
    {% if article.approved %}
    <div>
    <h2><a href="/articles/get/{{ article.id }}/">{{ article.title }}</a></h2>
    <p>{{ article.body|lower|article_shorten_body:50 }}</p>
    <p>{{article.likes}} people liked this article</a></p>
    </div>
    {% endif %}
{% endfor %}

{% else %}

<p>None to show!</p>

{% endif %}

{% endblock %

五.在django_test/static/js里面放入jquery-2.0.0.min.js文件和ajax.js文件,修改base.html的内容如下

<head>
    <title>{% block title %}My Base Template{% endblock %}</title>

    <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>
    
</head>

python manage.py collectstatic

六.修改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);
}

最终效果如下