JQuery - AJAX - Versionsgeschichte

84.157.18.5: /* Kommunikation mit dem Server über AJAX und jQuery */

2020-09-19T12:52:31Z

Kommunikation mit dem Server über AJAX und jQuery

84.157.18.5: /* Kommunikation mit dem Server über AJAX und jQuery */

2020-09-19T12:51:36Z

Kommunikation mit dem Server über AJAX und jQuery

37.49.33.84: /* JSON Daten Senden */

2014-12-16T10:45:41Z

JSON Daten Senden

79.240.26.38: /* Kommunikation über JSON */

2013-11-05T15:06:03Z

Kommunikation über JSON

79.240.52.209: /* JSON Daten über jQuery lesen */

2013-09-27T13:00:22Z

JSON Daten über jQuery lesen

Kholja: /* Datensätze aus einem JSON Objekt holen mit each */

2012-11-05T09:25:38Z

Datensätze aus einem JSON Objekt holen mit each

Kholja: /* JSON Daten über jQuery lesen */

2012-11-05T09:25:06Z

JSON Daten über jQuery lesen

134.3.241.116: /* JavaScript nachladen */

2012-10-19T08:02:46Z

JavaScript nachladen

134.3.241.116 am 19. Oktober 2012 um 07:54 Uhr

2012-10-19T07:54:05Z

134.3.241.116: /* JSON Daten über jQuery lesen */

2012-10-19T07:51:40Z

JSON Daten über jQuery lesen

@@ Zeile 124: / Zeile 124: @@
 '''login_get.php'''
-<pre>
+<syntaxhighlight lang="html5">
 <?php
@@ Zeile 151: / Zeile 151: @@
 mysql_close ($dbverbindung);
 ?>
+</syntaxhighlight>
 Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).

@@ Zeile 60: / Zeile 60: @@
 == Kommunikation mit dem Server über AJAX und jQuery ==
 '''ajax.html'''
-<pre>
+<syntaxhighlight lang="html5">
 <html>
    <head>
@@ Zeile 110: / Zeile 110: @@
    </body>
 </html>
-</pre>
+</syntaxhighlight>
 Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.

@@ Zeile 249: / Zeile 249: @@
 === JSON Daten Senden ===
 Daten aus einem Formular kann man einfach z.B. an ein PHP Skript senden
 === JSON Daten von fremden Servern ===

@@ Zeile 307: / Zeile 307: @@
    return Math.random();
+}
 </pre>

← Nächstältere Version		Version vom 27. September 2013, 13:00 Uhr
Zeile 246:		Zeile 246:

	</pre>		</pre>
		+
		+	=== JSON Daten Senden ===
		+	Daten aus einem Formular kann man einfach z.B. an ein PHP Skript senden

	=== JSON Daten von fremden Servern ===		=== JSON Daten von fremden Servern ===

@@ Zeile 212: / Zeile 212: @@
 '''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).
-==== Datensätze aus einem JSON Objekt holen mit each ====
+==== Beispiel Datensätze aus einem JSON Objekt verarbeiten mit each ====
 Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

← Nächstältere Version		Version vom 5. November 2012, 09:25 Uhr
Zeile 211:		Zeile 211:

	'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).		'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).
		+
		+	==== Datensätze aus einem JSON Objekt holen mit each ====
		+
		+	Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.
		+
		+	<pre>
		+	...
		+	$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
		+	//mapData = data;
		+	createMapSelector(data);
		+	});
		+	...
		+	</pre>
		+
		+	Übergeben wird das Data Objekt an diese Funktion
		+
		+	<pre>
		+
		+	function createMapSelector(data){
		+	$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
		+	$("#map_selector").append('<option value="na">Select product to view details</option>');
		+	$.each(data,function(key,obj){
		+	if(obj.products_name != null)
		+	$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
		+	});
		+	$("#map_selector_wrap").append('</select></div>');
		+	// click handler for selector
		+	$("#map_selector").change(function(){
		+	actID=$("#map_selector option:selected").val()
		+	if(actID != "na")
		+	loadMap(actID);
		+	});
		+	}
		+
		+	</pre>

	=== JSON Daten von fremden Servern ===		=== JSON Daten von fremden Servern ===

@@ Zeile 221: / Zeile 221: @@
 === JavaScript nachladen ===
 '''ajax.html'''
 <pre>

← Nächstältere Version		Version vom 19. Oktober 2012, 07:54 Uhr
Zeile 217:		Zeile 217:

	[[jQuery und JSONP - Tweets von Twitter lesen]]		[[jQuery und JSONP - Tweets von Twitter lesen]]
		+
		+	siehe auch nächstes Beispiel "JavaScript" nachladen.
		+
		+	=== JavaScript nachladen ===
		+	'''ajax.html'''
		+	<pre>
		+	<html>
		+	<head>
		+	<script type="text/javascript"
		+	src="lib/jquery/jquery.js"></script>
		+	<script>
		+	$(document).ready(function(){
		+	$("button:first").click(function(){
		+	$.getScript("zufall.js", function(){
		+	$("#ausgabe").text(zufallsZahl());
		+	});
		+	});
		+	$("button:last").click(function(){
		+	$.getScript("http://mydomain.de/jquery/zufall.js", function(){
		+	$("#ausgabe").text(zufallsZahl());
		+	});
		+	});
		+	});
		+	</script>
		+	</head>
		+	<body>
		+	<button>Lade Skript von gleicher Domain</button>
		+	<button>Lade Skript von fremder Domain</button>
		+	<div id="ausgabe"></div>
		+	</body>
		+	</html>
		+	</pre>
		+
		+	'''zufall.js'''
		+	<pre>
		+	function zufallsZahl(){
		+	return Math.random();
		+	}
		+	</pre>

← Nächstältere Version		Version vom 19. Oktober 2012, 07:51 Uhr
Zeile 1:		Zeile 1:
−
	== Wie funktioniert AJAX ? ==		== Wie funktioniert AJAX ? ==