通过Django中的Ajax将JSON数据从视图传递到html

Question

I cannot render html template with JSON data passed from views via ajax. I get correct JSON format from views and I can see the correct response in console.log(response) , but when I run from the browser this url http://127.0.0.1:8000/our-stores/ I get this result:

[{'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}]

But instead of this output I should get rendered ourstores.html file. Please, find the code below:

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
    } 

    });

};

Thanks a lot!

Answer 1

You do not render the ourstores.html template anywhere in your ourstores view. In order for a template to be displayed, it has to be rendered by the view. In your case, if the request is AJAX, you'd want a JSON to be rendered and if the request is not AJAX, the actual template to be rendered.

Your view could look something like this:

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

If you ask for JSON response, JSON response is what you will get. If you want to render a template, use the following:

def ourstores(request):

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

Then, inside your template use the passed data as {{response_data}}