Question

我正在尝试在Django中使用JSON数据来提供搜索和选择的用户选项。我可以加载和扩展数据到HTML，但不知道如何在jQuery中使用它。如果我将jQuery链接到服务器外部的某个网站，我的代码工作正常。我的意思是，如果我可以这样链接它：

$.getJSON("http://meme.computer/stack/data.json", function(data) {

我的代码是：

views.py：

from django.shortcuts import render
from aceform.forms import RequestForm
import json

def index(request):
    form = RequestForm()
    data = open('data.json').read()
    jsonData = json.dumps(data)
    return render(request, 'aceform/base.html', {'form': form, 'jsonData': jsonData})

base.html文件：

{% load staticfiles %}

<!doctype html>
<html>
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
     $(function() {
        var data = JSON.parse("{{ jsonData }}");
        console.log(data)
        autoComplete = [];
            for (var i = 0, len = data.length; i < len; i++) {
                autoComplete.push(data[i].iata + ", " + data[i].name);
            }
            console.log(data);
            $( "#id_from_airport" ).autocomplete({
                source: autoComplete,
                minLength: 3
            });
            $( "#id_to_airport" ).autocomplete({
                source: autoComplete,
                minLength: 3
            });
     });
    </script>
    </head>

    <body>
        {% block content %}

        {{ form.as_p }}

        {% endblock content %}
    </body>
</html>

Answer 1

$.getJSON("{{jsonData}}", function(data)

没有意义。您正在从视图中调用呈现的JSON上的getJSON。您已在模板中拥有数据。

根据您使用的模板引擎，您应该能够遍历{{jsonData}}。

Answer 2

此时此处：

data = open('data.json').read()

数据已经是字符串类型。

你不需要“把它变成json”，因为它已经被序列化（希望）为json。

你可以这样做来向自己证明（也许在整个过程中检查错误）：

def index(request):
    form = RequestForm()
    data = open('data.json').read()
    jsonData_loaded = json.loads(data)
    jsonData = json.dumps(jsonData_loaded)
    # I note here that you aren't closing the open file data.
    return render(request, 'aceform/base.html', {'form': form, 'jsonData': jsonData})

但这太傻了。

这样做可能更有意义：

def index(request):
    form = RequestForm()
    with opened as open('data.json'):
        data = json.load(opened)
    jsonData = json.dumps(data)
    return render(request, 'aceform/base.html', {'form': form, 'jsonData': jsonData})

我的意思是，它可能也是加载和转储的冗余，但是a。）你怎么知道磁盘上的json是有效的b。）你可能会携带新的线路charectors或其他随机废话。

（对于这类事情，我不会从盘中读到这样的东西）

这里故事的寓意是，你已经有了一个字符串。你可以把它传递给FE并希望最好！

编辑FE：

哦，然后我只看了你的模板。

你实际上并不需要整个$ .getJSON函数，因为你已经有了json。

您可以var data = JSON.parse('{{jsonData|safe}}');

然后带着那个去城里！

Answer 3

您可以使用安全标记将json数据传递给js / jquery，就像{{ jsonData|safe }}

一样

我看到你的jsonData已经是一个json格式的字符串。

您可以在模板中尝试此操作，例如

<script>
    $(function () {
        var data = {{ jsonData|safe }}
        console.log(data)
        autoComplete = [];
        for (var i = 0, len = data.length; i < len; i++) {
            autoComplete.push(data[i].iata + ", " + data[i].name);
        }
        console.log(data);
        $("#id_from_airport").autocomplete({
            source: autoComplete,
            minLength: 3
        });
        $("#id_to_airport").autocomplete({
            source: autoComplete,
            minLength: 3
        });
    });
</script>

在Django中如何传递JSON数据用于Ajax / jQuery？

我的代码是：

3 个答案: