jquery ajax return data and html

Question

I have a jQuery Ajax call to my server to retrieve some HTML for a section on my page based on some user activity with my site. I'm finding I need in addition to the rendered HTML from the server some JSON data. What's best way to return to the client rendered HTML and JSON data? I'm thinking there are 3 different options:

make a second call to the server for the JSON data. This involves a second round trip. I can string multiple ajax calls using:

$when(call_1, call_2).done(function(results_1, results_2){...}))
include a script block in the rendered html that is called once the rendered html is added to the dom:
```
... rendered html output ...
$(document).ready(function ()
{
    alert('data here');
});
```
somehow embed rendered html into json returned from call then have calling JS function separate the rendered html from JSON and update DOM accordingly. This option just smells bad.

I'm leaning to option 1 even though it's an additional server hit because it seems like a better approach. Which approach is better in your opinion? Is there another way I've not thought of?

Thanks

vulcan raven · Accepted Answer · 2012-10-16 06:32:19Z

First of all, encode your HTML on server side.. something like:

function HTMLEscape(str) {   //Javascript code, adjust as per your server-side lang
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

Now, supposedly you received the following JSON response at client-side:

data = {
     html: "&lt;div&gt;Text goes here&lt;/div&gt;&lt;script type=&#39;text/javascript&#39;&gt;alert(&#39;text goes here too&#39;)&lt;/script&gt;",
     status: 1,
     some: 'stuff'
};

On Ajax complete, start unpacking your JSON:

ResultJSON = data;

$("div#destination").html(HTMLUnescape(ResultJSON.html));
$("input#status").val(ResultJSON.status)

Finally, hide this Javascript function somewhere in your .js file:

function HTMLUnescape(str) {
    return String(str)
        .replace(/&amp;/g, '&')
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>');
}

Hope it helps. (-:

Vivek S · Accepted Answer · 2012-10-16 06:05:11Z

0

option 1 is better. You may also think of this,

Let the json dictionary sent to the html contain all your data and the html content. Something like this,

{
'html':"<div>this is new html</div>",
'var1':'var1 value',
'var2':'var2 value'
}

answered Oct 16, 2012 at 6:05

Vivek S

5,5708 gold badges57 silver badges74 bronze badges

1 Comment

Tom Schreck Over a year ago

Thanks for your feedback. I thought about what you describe. My rendered HTML can be rather large and I'm concerned that some a funny character in the rendered html may make the JSON invalid. Thoughts?

Collectives™ on Stack Overflow

jquery ajax return data and html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related