首页 / 问题 / 正文

Django中的Jquery

2 投票
1 回答
1960 浏览
提问于 2025-04-18 07:32

我正在学习在Django应用程序中使用Jquery。我的代码大致是这样的：

views.py

from django.shortcuts import render
from django.http import HttpResponse
from airapp.models import Travel

def search_form(request):
    return render(request, 'search_form.html')


def search(request):
    if 'f' in request.GET and request.GET['f']:
        q = request.GET['f']
        books = Travel.objects.filter(froms__icontains=q)
        return render(request, 'search_results.html',
            {'books': books, 'query': q})
    else:
        return HttpResponse('Please submit a search term.')

urls.py

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

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',

    url(r'^admin/', include(admin.site.urls)),
    url(r'^search-form/$', views.search_form),
    url(r'^search/$', views.search),
)

search_form.html

<html>
<head>
    <title>Search</title>
</head>
<body>
    <form action="/search/" method="get">
        FROM<input type="text" name="f"><br>
        TO<input type="text" name="t"><br>
        CLASS<input type="text" name="c"><br>
        <input type="submit" value="Search">
    </form>
</body>
</html>

search_results.html

<p>You searched for: <strong>{{ query }}</strong></p>

{% if books %}
    <p>Found {{ books|length }} book{{ books|pluralize }}.</p>
    <ul>
        {% for book in books %}
        <li>{{ book.froms }}</li>
        <li>{{ book.to}}</li>
        <li>{{ book.classs }}</li>
        <li>{{ book.details }}</li>

        {% endfor %}
    </ul>
{% else %}
    <p>No books matched your search criteria.</p>
{% endif %}

当搜索结果显示时，它会在一个新的html页面（search_results.html）上。我想在创建表单的同一个html页面（search_form.html）上显示搜索结果，当我点击搜索按钮时。请问我可以用jquery来实现吗？有没有人能帮我写一下代码？另外，有没有推荐的教程可以学习ajax和jquery，以及如何在Django应用开发中使用它们。

django ajax web开发 表单处理 搜索功能 jquery 前端交互 动态内容加载

1 个回答

0

这里有一个可以工作的示例。只需要修改search_form.html：

<html>
<head>
    <title>Search</title>
    <script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script language="JavaScript" type="text/javascript">
        $(function() {
            $("#search-form").submit(function() {
                var from = $("#search-form :input[name='f']").val();
                $.get("/search/", { f : from })
                    .done(function(data) {
                        $("#search-result").html(data);
                        $("#search-result").show();
                    });
                return false;
            })});
    </script>
</head>
<body>
    <form id="search-form">
        FROM<input type="text" name="f"><br>
        TO<input type="text" name="t"><br>
        CLASS<input type="text" name="c"><br>
        <input type="submit" value="Search">
    </form>

    <div id="search-result" style="display:none">
    </div>
</body>
</html>

基本上，它的功能是：

  1. 在网页的头部引入jQuery库
  2. 在脚本中，替换掉'搜索表单'的'提交'行为：使用$.get向服务器发送一个GET请求，并直接把服务器的响应显示在'search-result'这个区域里。（你可以修改代码，让它更稳定一些）
  3. 在网页主体中，创建一个'search-result'的区域，用来显示响应内容。默认情况下让它不可见（可以在CSS文件中设置）

关于Ajax的内容，你可以参考这个链接：http://api.jquery.com/jquery.ajax/。$.get是基于$.ajax的一个简化用法：http://api.jquery.com/jquery.get/

回答于 2025-04-18 由 Python大师
分享 举报

撰写回答