Benutzer-Werkzeuge

Webseiten-Werkzeuge


tutorials:t2_simplejquery

Javascript Beispiel

Dieses Beispiel soll zeigen, wie ein einfacher Aufruf per jQuery möglich ist. Kern des Beispiels ist der folgende Javascript-Code. Hinweis: Für jQuery bieten wir ein spezielles Plugin namens "dStore_js" an.

Als Rückgabeformat ist hier „JSON“ gewählt (Format-Parameter).

jQuery(function($) {
	$('body')
	.on(
			'click',
			'#yt1',
			function() {
				jQuery
				.ajax({
					'type' : 'GET',
					'dataType' : 'json',
					'data' : [],
					'success' : function(data) {
						go(data);
					},
					'url' : 'http://dbap-demo.dstore.de/default/engine/mi_GetUnits?Format=json',
					'cache' : false
				});
				return false;
			});
});

Hier das komplette Beispiel inklusive der Verarbeitung des Ergebnisses:

simple_js_example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<title>simple_js_call</title>
</head>
 
<body>
 
<div id="content">
	<input name="yt1" type="button" value="Call dStore" id="yt1" />
</div>
 
<div id="JSCONTENT">
</div>
 
<script type="text/javascript">
function go(jsonData)
{
	// Aus dem JSON-Object nur alles innerhalb von ResultSet verarbeiten
	var liData = buildList(jsonData.Statement.ResultSet.Rows);
 
	// Die Liste nun in die DIV mit der ID #JSCONTENT packen
	$('#JSCONTENT').html(liData);
}
 
function buildList(data)
{
	// Funktion die das JSON-OBJECT als Liste ausgibt
	var key='';
	var value='';
 
	// Verschachtelte Liste rekursiv zusammenbauen
	var html='<ul>';
	for(var key in data)
	{
		// Wenn der Value kein String sondern ein Object ist
		if(typeof(data[key]) == 'object')
			html += '<li>'+key+'</li>'+buildList(data[key]);
		else
		{
			// Wenn der Key != $ ist. (json eigenheit)
			if (key != "$")
				html += '<li>'+key.replace(/@/g,'')+' => '+data[key]+'</li>';
			else
				html += '<li>'+data[key]+'</li>';
		} // else
	} // for(var key in data)
	return html+'</ul>';
} // function buildList(data)
 
jQuery(function($) {
	$('body')
	.on(
			'click',
			'#yt1',
			function() {
				jQuery
				.ajax({
					'type' : 'GET',
					'dataType' : 'json',
					'data' : [],
					'success' : function(data) {
						go(data);
					},
					'url' : 'http://dbap-demo.dstore.de/default/engine/mi_GetUnits?Format=json',
					'cache' : false
				});
				return false;
			});
});
</script>
</body>
</html>
tutorials/t2_simplejquery.txt · Zuletzt geändert: 13.11.2014 (Externe Bearbeitung)