json object send to JSF backing bean to xhtml page

when user click on the button in the xhtml page i want get Student data object as json and display in xhtml page...

I have tried it following way..
JSF backing bean

my xthml page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<div id="watch_list">Get Json Data</div>
			<script type="text/javascript">
					$.getJSON('#jsonBean.jsonObject', function(data) {
  					var items = [];
 					 $.each(data, function(key, val) {
   					 items.push('<li id="' + key + '">' + val + '</li>');
  					});
  					$('<ul/>', {
   				 'class': 'my-new-list',
   				 html: items.join('')
  			}).appendTo("#jsondata");
		});
		
		</script>
						<div style="padding-bottom: 30px;">

<h:form id="passwdChange">
								<h:commandButton type="submit" id="jb" value="json data retrieve">
								</h:commandButton>
							</h:form>

</div>
						<div id="jsondata">
						
						</div>

</div>
				</div>
			</div>
		</div>
		<div id="leftcolumn">
			<ui:include src="/templates/main_menu.xhtml"></ui:include>
		</div>
	</ui:define>
</ui:composition>
</html>

it's not working. please let me to way i can pass json object from jsf backing bean to xhtml page when user operation happend in xhtml page(Ex: user click the button in xhtml page)
Thank you