Sign in to follow this  
Followers 0

jQuery Ajax insert JSON object into JSP page

3 posts in this topic

Posted

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

			}

		});

	});

});

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>

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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.