将 Django 中的视图/模型链接到 Javascript 前端框架

Question

我精通 Javascript 和 python，并且通常熟悉 django，但对其中一些 javascript 前端框架非常陌生。

对于以下情况我应该使用哪种工具有点困惑：

用户有一个包含多个因素的搜索查询，但我希望在查询之后可以调整这些因素（即价格滑块）。

理想情况下，新结果（来自 django 视图中的查询集过滤器）无需刷新即可呈现。

另一种场景是经典的 ajax，无需刷新即可提交表单。

我正在考虑所有主要的库（jquery、react）以及框架（backbone、angular、ember）。

所有这些都可以完成我给出的示例吗？这称为什么类型的过程（数据绑定？），我在哪里可以找到一些关于将 django 与任何框架/库连接起来的好教程。

在此先感谢您的任何意见。

Answer 1

因此，我建议以下内容并考虑您的价格滑块示例。这是一个如何仅使用 jQuery 按名称搜索用户的示例。

显然，您需要一个用于搜索查询的输入表单。

<form class="search-form">
    <input type="text" name="search" placeholder="Search.." id="search-name">
    <button class="search-submit">Go!</button>
    <!-- toggleable search options here, including your price slider. -->
</form>

随心所欲地自定义它的外观。这里重要的是用户将在搜索框中输入文本，然后单击“Go！”。您需要将 jQuery 事件附加到此操作，不作为表单提交，因为这会重新加载您不想要的页面。

$(".search-submit").click(function() {
    var url = "/search?name=" + $("#search-name").val();
    $.ajax({
        method: "GET",
        url: url,
        success: function (data) {
            // Dynamically change your page results with more jquery based on data
        },
        error: function (err) {
            alert("Something went wrong");
        }
    });
});

接下来，你需要一个 URL 和 View 来接受这个 ajax 请求。

urls.py:

from views.py import search
# Search URL
url((r'^search/$', search),

views.py：

import json
from app.models import User
from django.http import HttpRespons

def search(request):
    # Grab the data
    query = request.GET.get("name", None)
    # Make the query using your backend, the following is just an example
    users = User.objects.filter(name=name)
    # Serialize the objects as necessary
    data = []
    for user in users:
        data.append({
            "name" : user.name,
            "age" : user.age,
            # Other stuff you want from the objects you retrieved.
        })
    return HttpResponse(json.dumps(data))

这样就结束了循环。当用户输入搜索查询时，ajax 会调用你的资源，得到新的结果，页面的动态变化交给你。

要做的事情：
- 获取查询时某种加载“掩码”。可以用jquery和CSS来完成 - 额外的搜索选项。最好在您向服务器发出的请求中添加更多查询字符串。例如，“/search?name=Jack&age=42”。