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

Question

我无法使用通过 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

urls.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 %}

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
    } 

    });

};

非常感谢！

Answer 1

您不会在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')

Answer 2

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

def ourstores（请求）：

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))

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