Django has a powerful system for returning HTML pages, and excellent integration with AJAX systems for returning HTML via AJAX requests, but you can take your project one step further using JSON.
Let’s say we have a web app with a table of dog breeds, and each row represents a different breed of dog. Because of the high number of rows that the table would contain, we probably want to allow the user to filter the table’s contents. Using jQuery and JSON, we can dynamically add rows to the table.
First, the Django side of things. We want a Django view that returns JSON. For our example, we gather a queryset of the objects we wish to add to the table, then extract the data we want from the objects and add it to a dictionary which will be returned via JSON.
# import all the necessary packages, including our Dogs model from dog_app.models import Dogs from django.http import HttpResponse import simplejson def more_dogs(request): # get the objects you wish to return dogs = Dogs.objects.filter(...) # construct a list which will contain all of the data for the response to_json = [] for dog in dogs: # for each object, construct a dictionary containing the data you wish to return dog_dict = {} dog_dict['breed'] = dog.breed dog_dict['size'] = dog.size # ...etc # append the dictionary of each dog to the list to_json.append(dog_dict) # convert the list to JSON response_data = simplejson.dumps(to_json) # return an HttpResponse with the JSON and the correct MIME type return HttpResponse(response_data, mimetype='application/json')
// Make the request $.get('/ajax/more_dogs/', function(data) { // data is the response data. In this case, our JSON // Our JSON contains several dictionaries for each breed of dog, // and we want to construct an HTML table row for each // First, lets get the table body which we'll add the rows to $tbody = $("#dog_table").find('tbody'); // next, iterate through the JSON array $.each(data, function() { // create the row $row = $('<tr>'); // iterate through each dog breed's attributes and create a column for each key, value pair $.each(this, function(key, value) { // create the column $col = $('<td>'); // add text to the column $col.text(key+":"+value); // append the column to the row $row.append($col); } // append the row to the table body $tbody.append($row); } });
There’s another advantage to using JSON, however. If you ever want to access database information from outside the project’s environment, you can use the same views.
Try it out and see what you can do!