Best practice for transferring data in html using ajax

Question

I am trying to load some element details on click of this element in some already defined div. I have 2 ways to do this.

Note. I use python / django as a backend, and jquery in frontend

I am. My first way

Views.py

def get_item_data(id): obj = MyClass.objects.get(pk=id) html = """ <div>All Details Here, 1. {0}, 2. {1}</div> """.format(str(obj.id), str(obj.name)) return HttpResponse(html) 

myapp.js

 $('#myid').on('click', function(){ $.ajax({ type: "GET", url: GET_DATA, data: dataString, success: function(res) { $('#addl_container').html(res); } }); }); 

II. Another way

Views.py

 def get_item_data(id): obj = MyClass.objects.filter(pk=id).values() return HttpResponse(simplejson.dumps(obj)) 

myapp.js

 $('#myid').on('click', function(){ $.ajax({ type: "GET", url: GET_DATA, data: dataString, success: function(res) { $('#addl_container').html( "<div>All Details Here, 1. "+ res.id +", 2. "+ res.name + "</div>" ); } }); }); 

Both processes work. I thought that creating html in advance and loading it might not be a good choice, since we use python code to create html and then load it. Also it will not work if I try to access the same URL from another application. Creating html from jquery by extracting data from a json response seems like a good solution, but sometimes when the data is huge, the user needs more bar, which slows down the system.

I am confused which one to use, please suggest the best solution of these two. Also suggest another solution better than this, if any?

Thanks in advance.

Answer 1

I prefer to separate template logic, business and js as much as possible. It keeps it more pythonic and more in line with django design principles. This is really very similar to your first method, but it uses an html template, not printing html to a string in your view.

views.py

 def get_item_data(id): template_name = 'index.html' obj = MyClass.objects.get(pk=id) context = { 'obj': obj, } html = render_to_string(template_name, context) return HttpResponse(html) 

index.html

 <h1>{{ obj }}</h1> 

myapp.js

 $('#myid').on('click', function(){ $.ajax({ type: "GET", url: GET_DATA, data: dataString, success: function(res) { $('#addl_container').html(res); } }); }); 

Answer 2

very rough draft, from what I actually use, which is Pen :

in the Django template. head

 <!--Handlebar templates start--> {% include "app/mydiv.handlebars.html" %} <!--Handlebar templates end--> 

application /mydiv.handlebars.html

 {% verbatim %} <script id="template-myapp-my-div" type="text/x-handlebars-template"> <div>All Details Here, 1.{{res.id}} res.id, 2. {{res.name}}</div> </script> {% endverbatim %} 

Something like this in JS:

 _success = function(json_data_from_response) { var templateSource = $("#template-myapp-mydiv").html(); if (!templateSource) { $("#errors").html("template-myapp-mydiv:error:no template found"); return; } // you could compile ahead of time elsewhere or cache the compile. var template = Handlebars.compile(templateSource); // now merge your incoming data. var myhtml = template(json_data_from_response); $("#addl_container").html(myhtml); ); 

I didn’t enter the Handlebars template templates, but they are 80% similar to Django templates, minus the tag and filters, so you need to do this quite easily.

An additional benefit of using Handlebars is that it can provide sprintf / python string replacements in the client. The type of heavyweight for this use, but if you have it anyway ...

 //compute an actual url on the fly from a template (ie depending on //what the user clicked on, I compute what to fetch) var _url = _settings.url_details_base; var t_url = Handlebars.compile(_url); var url = t_url({"CREF": CREF,"rdbname" : rdbname}); //do something with url, like an Ajax call.