Jump to content


jQuery Ajax insert JSON object into JSP page

  • Please log in to reply
2 replies to this topic

#1 saiz66



  • Joined: 25-May 03

Posted 03 May 2012 - 21:29

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;
			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);

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.

<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 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>
				<br />

#2 mbowman



  • Joined: 15-November 11

Posted 04 May 2012 - 07:31

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);
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;

var obj = myJSONRequest();

var newHTML='';
newHTML +='<h1>'+obj.name +'</h1><b>'+obj.email+'</b>';
$('#box').html( newHTML);

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

$searchString = document.getElementById("searchString").value;
could be as.
$searchString = $('#searchString').val();

#3 Tjcool007



  • Joined: 27-April 11
  • Location: Belgium
  • OS: Windows 7 Pro x64, Ubuntu 13.04

Posted 04 May 2012 - 09:14

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.