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

Question

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

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

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

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

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

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

这些都能完成我举的例子吗？这称为什么类型的过程（数据绑定？），我在哪里可以找到一些关于将 django 与 framework/library.

连接起来的好教程

在此先致谢，如有任何意见，我们将不胜感激。

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 将调用您的资源，获取新结果，我会将页面的动态更改留给您。

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

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

Linking the View / Model in Django to a Javascript Front End Framework

django

jquery

backbone.js

angularjs

reactjs