Sign in to follow this  
Followers 0
saiz66

jQuery Ajax insert JSON object into JSP page

3 posts in this topic

Hi all,

I have a question on how I should display a JSON object in a JSP page. I have a simple example where it is properly getting the JSON object from the servlet called data and it is simply putting data.name in a <h1> html tag and the data.email in <b> tag.


$(document).ready(function() {
$('#getData').click(function() {
$searchString = document.getElementById("searchString").value;
$.ajax({
url : 'JsonServlet',
type : 'post',
data: {searchString : $searchString},
dataType : 'json',
success : function(data) {
var newHTML='';

newHTML +='<h1>'+data.name +'</h1><b>'+data.email+'</b>';

$('#box').html( newHTML);
}
});
});
});
[/CODE]

Is there a better way of displaying this instead of creating a variable which concatenates the JSON object with the html? I am used to formatting the JSP page using JSTL which I find much cleaner. Thanks in advance.

[CODE]
<div id="data">
<c:forEach var="current" items="${requestScope.exceptionList}">
<div class='data-top'>
${current.defectNumber} <a
href='DisplayUpdateServlet.do?defect=${current.defectNumber } '
class='edit'><img src='css/image/edit.png' border='0'></a>
</div>
<div class='data-bottom'>
<div class='data-bottom-heading'>Activity</div>
<br />
<div class='data-bottom-body'>${current.activity }</div>
<br />
<div class='data-bottom-heading'>Exception</div>
<br />
<div class='exception'>${current.exception }</div>
</div>
<br />
</c:forEach>
</div>
</div>
[/CODE]

Share this post


Link to post
Share on other sites

Are you not missing out adding the data object to a parseJSON method?

I always do this when dealing with the returned data.


success : function(data) {
var obj = jQuery.parseJSON(data);[/CODE]

Which then allows me to do obj.name

I'm kind of missing out what you're getting at. JSTL is a server side taglibrary... if you're wanting to clean up your JS you could add in the code above to a function and return the JSON;

[CODE]
var obj = myJSONRequest();

var newHTML='';

newHTML +='<h1>'+obj.name +'</h1><b>'+obj.email+'</b>';

$('#box').html( newHTML);
[/CODE]

also noticed you're mixing standard JS with JQuery might as well just use the JQuery get by id?

[CODE]$searchString = document.getElementById("searchString").value;[/CODE]

could be as.

[CODE]$searchString = $('#searchString').val();[/CODE]

Share this post


Link to post
Share on other sites

I believe jsRender does something like you want. Unfortunately it's still pre-beta stage (although it's actively developed).

You'll probably find others online though. Just search for javascript/jquery templating systems or something.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.