Should I include HTML markup in my JSON response?

 

12down votefavorite

1

In an e-commerce site, when adding an item to a cart, I'd like to show a popup window with the options you can choose. Imagine you're ordering an iPod Shuffle and now you have to choose the color and text to engrave.

I'd like the window to be modal, so I'm using a lightbox populated by an Ajax call. Now I have two options:

Option 1: Send only the data, and generate the HTML markup using JavaScript

What's nice about this is that it trims down the Ajax request to the bear minimum and doesn't mix the data with the markup.

What's not so great about this is that now I need to use JavaScript to do my rendering, instead of having a template engine on the server-side do it. I might be able to clean up the approach a bit by using a client-side templating solution.

Option 2: Send the HTML markup

What's good about this is that I can have the same server-side templating engine I'm using for the rest of my rendering tasks (Django), do the rendering of the lightbox. JavaScript is only used to insert the HTML fragment into the page. So it clearly leaves the rendering to the rendering engine. Makes sense to me.

But I don't feel comfortable mixing data and markup in an Ajax call for some reason. I'm not sure what makes me feel uneasy about it. I mean, it's the same way every web page is served up -- data plus markup -- right?

mvc django templates json

shareimprove this question

edited Jul 25 '11 at 2:57   user8

asked Jul 24 '11 at 19:58 Mike M. Lin 297312

Great question. But seems to belong to stackoverflow. –  Saeed Neamati Jul 25 '11 at 2:46

1

@SaeedNeamati Software design questions, especially whiteboard-y conceptual questions like this one areon-topic here and off-topic on Stack Overflow. –  user8 Jul 25 '11 at 2:58 

add a comment

4 Answers

activeoldestvotes

up vote8down voteaccepted

JSON should just contain the data and no markup. In the long run this approach is more extensible because there is potential for using the JSON data in other parts of your site. If you include markup then using the same data to populate another template becomes much harder.

shareimprove this answer

answered Jul 25 '11 at 2:06 davidk01 4,58612435

2

Great point about the reuse. Everyone seems to be voting for the Ajax request to only contain data, and no markup, for various reasons. But this one is a big one. Thanks. –  Mike M. Lin Jul 25 '11 at 3:36

2

Not to mention that JSON without markup is smaller and uses less bandwidth. –  Jack Maney Sep 12 '12 at 22:53

@JackManey: Also a good point. But the true cost of additional bandwidth isn't all that much after you already eat the cost of the HTTP request. And I can imagine some setups where you know the client machines are so crappy that it would cost you more to generate the DOM real-time using JavaScript. Think: Internal apps with users on ancient machines/browsers. –  Mike M. Lin Sep 16 '12 at 5:41

add a comment

up vote3down vote

I would send the data in the request and build up the markup in js. One extra benefit would be is that there would be less bandwidth usage. It's kind of a personal preference but keeping client side markup away from the server side is probably a better idea. I have a Django website as well and I only use the templating system for putting some json varibles on the page (one less ajax req. to make) and using src files when developing on my machine. All of the client side is done with ExtJS.

shareimprove this answer

answered Jul 24 '11 at 23:13 pllee 638512

I like your idea of burning the JSON data into the page -- not here since I don't fetch the additional data until I know what item you're adding to your cart. Making a request for the page layout, then a second for the data seems to be common these days. Having the data in a JavaScript variable eliminates the need for the second HTTP request without having the have two different bits of rendering code (i.e, client and server). – Mike M. Lin Jul 25 '11 at 3:33

Oh I see your server is not advanced enough to know what the user is going to put in the cart beforehand ;). –  pllee Jul 25 '11 at 15:40

add a comment

up vote1down vote

I think you've talk about the pros and cons of both. Why not look at a 3rd option of having the javascript for your lightbox be generated from a django view. Then have your JSON just contain the data to update it for each view?

What you should be able to do is wrap all the templating code into javascript variables and then output them with javascript after it's received the JSON request on the client side.

shareimprove this answer

answered Jul 24 '11 at 23:50 Ryan Gibbons 20318

Thanks for the reply. That's actually what I meant in option 1. The lightbox as a container would be burned into the page but hidden. The JSON data from the Ajax request would be used to generate the content in the container. Some of that content would be marked up using HTML. How did you interpret option 1? Maybe thatcan be my third option. –  Mike M. Lin Jul 25 '11 at 3:28

I was thinking something along the lines of this stackoverflow.com/questions/6008908/… then using JSON to replace the data after the initial load –  Ryan Gibbons Jul 25 '11 at 4:10

add a comment

up vote0down vote

You should use the template engine for markup and keep a hidden field somewhere to store values, that you can then find in the document using a selector.