Javascript 在Django中通过ajax将JSON数据从视图传递到html

我无法使用通过ajax从视图传递的JSON数据呈现html模板。我从视图中获得了正确的JSON格式，我可以在

console.log（response）

中看到正确的响应，但是当我从浏览器运行此url时

http://127.0.0.1:8000/our-stores/

我得到这个结果：

[{'fields': {'address': 'Kilpolantie 16',
             'city': 'Helsinki',
             'country': 'Finland',
             'name': 'K-market'},
  'model': 'shoppire.supermarket',
  'pk': 1},
 {'fields': {'address': 'Kontulankari 16',
             'city': 'Helsinki',
             'country': 'Finland',
             'name': 'S-market'},
  'model': 'shoppire.supermarket',
  'pk': 2}]

但是我应该得到呈现的

ourstores.html

文件，而不是这个输出。请在下面查找代码：

models.py

class Supermarket(models.Model):
    name = models.CharField(max_length=30)
    address = models.CharField(max_length=50)
    city = models.CharField(max_length=60)
    country = models.CharField(max_length=50)

    def __unicode__(self):
        return self.name

url.py

urlpatterns = [
    url(r'^our-stores/$','shoppire.views.ourstores',name='ourstores'),
    url(r'^admin/', include(admin.site.urls)),
]

views.py

def ourstores(request):

    stores_list = Supermarket.objects.all()

    response_data = serializers.serialize('json',stores_list)

    return HttpResponse(response_data,content_type="application/json")

ourstores.html

{% extends 'base.html' %}

{% block content %}

<div class='col-sm-12' style='text-align:center'>
    <h2>Check out our stores:</h2>

    <div id="show_stores" onload="ShowStores()"></div>

    <div id="results"></div>

</div>

{% endblock %}

{%extends'base.html%}
{%block content%}
查看我们的店铺：
{%endblock%}

ShowStores.js

$(document).ready(function(){
    ShowStores();
});
function ShowStores() {
    console.log("show stores is working");

    $.ajax({

        url : "our-stores",
        type : "GET",
        dataType : "json",
        success: function(response){

            $.each(response,function(index){
                $('#results').append(response[index].fields.name);
                console.log(response[index].fields.name);
        });

        console.log(response);
        console.log("success");

    },
    error : function(xhr,errmsg,err) {
        $('#show_stores').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
            " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
        console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
    } 

    });

};

$（文档）.ready（函数（）{
ShowStores（）；
});
函数ShowStores（）{
console.log（“显示存储正在工作”）；
$.ajax({
url:“我们的商店”，
键入：“获取”，
数据类型：“json”，
成功：功能（响应）{
$。每个（响应、功能（索引）{
$（'#results'）.append（响应[index].fields.name）；
console.log（响应[index].fields.name）；
});
控制台日志（响应）；
控制台日志（“成功”）；
},
错误：函数（xhr、errmsg、err）{
$（'#show_stores'）.html（“哎呀！我们遇到了一个错误：”+errmsg+
“”）；//将错误添加到dom
log（xhr.status+“：“+xhr.responseText）；//向控制台提供有关错误的更多信息
} 
});
};

---

非常感谢

您不会在

ourstores

视图中的任何位置呈现

ourstores.html

模板。为了显示样板，必须由视图渲染样板。在您的例子中，如果请求是AJAX，您希望呈现JSON，如果请求不是AJAX，则呈现实际的模板

您的视图可能如下所示：

def ourstores(request):
    if request.is_ajax():
       stores_list = Supermarket.objects.all()

       response_data = serializers.serialize('json',stores_list)

       return HttpResponse(response_data,content_type="application/json")

    return render(request, 'ourstores.html')

---

如果您请求JSON响应，您将得到JSON响应。 如果要渲染模板，请使用以下命令：

def存储（请求）：

---

然后，在模板中使用传递的数据作为{{response_data}}

为什么希望jQuery从JSON呈现HTML？我希望jQuery从视图中获取响应并以HTML显示该响应。jQuery所要做的就是将请求返回的JSON附加到DOM中。JSON不会神奇地转换成HTML。感谢您的回复。在本例中，我排除了JavaScript和ajax，直接从视图中呈现模板。我希望html通过ajax将json数据请求发送到视图，然后视图将数据发送回ajax，并将数据插入html标记中。感谢您的响应。正如您所写的，我得到了模板，但我没有从视图返回JSON数据。我希望视图将数据发送回ajax调用，并且返回的数据显示在template.Hm上。检查通过ajax调用视图时，request.is_ajax（）是否为

True

。@Moki您可以尝试的另一件事是更改ajax请求的URL以附加斜杠（

URL:“我们的商店/”

）。如果启用了

APPEND\u SLASH

，则AJAX请求将被重定向，并松开将其标记为AJAX的标题。

request.is\u AJAX（）

返回false，因此AJAX调用中的url可能不正确。我尝试使用斜杠，但它也是错误的。您可以在AJAX请求URL中粘贴一个GET参数，并检查它是否存在于视图中。例如：

url:“我们的商店？ajax=1”

然后代替

request.is\u ajax（）

使用

request.GET.GET（'ajax'）

。

stores_list = Supermarket.objects.all()

response_data = serializers.serialize('json',stores_list)

return render_to_response('our_stores.html',
                      response_data,
                      context_instance=RequestContext(request))