You are not logged in.

  • Login

1

Wednesday, December 21st 2011, 7:34am

Post Daten versenden mit Ajax

Hallo zusammen,
ich nutze dieses Script AJAX Ladegrafik um eine Ladegrafik anzuzeigen.

Das Script ist für meine verhältnisse schon etwas modifiziert, da ich manchmal auch mehrere Div's neu laden muss. Hier der Aktuelle Code:

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
function sendRequest(linkref, target, url,a) {
	var loadingImg = document.createElement('img');
loadingImg.className = 'loadingIcon';
	linkref.blur();
 
	document.getElementById(target).appendChild(loadingImg);
 
	var req;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
			new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		// no AJAX Support
	}
	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			//document.getElementById(target).removeChild(loadingImg);
			document.getElementById(target).innerHTML = req.responseText;
			if(a>'') {
				for (var i = 1; i <= 5; i++)
				if(a==i) {
					$('iceMenu_e'+i).addClassName('active');
				} else {
			$('iceMenu_e'+i).removeClassName('active');
				};
			}
		}
	}
 
	req.open('post', url);
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send();
 
 
	return false; // return false to avoid reload/recentering of the page
}
//-->
</script>


Das Script so sowohl für Links die einen Reload auslosen als auch für Formulare gedacht sein. Leider werden beim versenden eines Formulars die Daten nicht mit übergeben. Hier mal ein Testformular:

HTML Code

1
2
3
4
5
<form name="test" action="#" method="post">
<input type="text" name="bla"><br>
<input type="text" name="blubb"><br>
<input type="button" name="send" value="senden" onClick="sendRequest(this, 'kddaten','rand.php','');">
</form>

Verwende ich einen Submit button wird natürlich die ganze Seite neu geladen.

Wer kann mir einen Tipp geben wie ich die Formulardaten richtig übertrage.

MfG
Boyge

2

Wednesday, December 21st 2011, 9:57pm

Ich würde dir empfehlen ein fertiges JavaScript Framework wie z.B. jQuery zu verwenden: http://jquery.com/

jQuery Ajax Doku: http://api.jquery.com/category/ajax/

3

Thursday, December 22nd 2011, 6:39pm

In deinem Code steht auch nichts zum überegeben von Daten.
Für das Arbeiten mit Formularen solltest du entweder ein Framework nutzen oder mal diesen Wiki Artikel lesen: Formulare mit AJAX.. und ohne

4

Friday, December 23rd 2011, 10:19am

Hallo zusammen,

Danke für eure Antworten, aber nach eifrigem Lesen bin ich zu einer Lösung gekommen. Hier der Code:
Verwenden tu ich prototype Framework.

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function sendRequest(linkref,target,url,aktiv,gesamt,gruppe,klasse,formular) {
	var loadingImg = document.createElement('img');
loadingImg.className = 'loadingIcon';
	linkref.blur();
 
	document.getElementById(target).appendChild(loadingImg);
	var option = '';
	if(formular>'') {
		option =  $(formular).serialize(true);
		}
new Ajax.Updater(target,url,
				{
					evalScripts: true,
					method:'post',
					parameters: option,
					onComplete: function() {
						if(aktiv>'') {
						for (var i = 1; i <=gesamt; i++)
							if(aktiv==i) {
								$(gruppe+i).addClassName(klasse);
							} else {
								$(gruppe+i).removeClassName(klasse);
							};
						}
					},
					onFailure: function(){ document.getElementById(target).innerHTML = 'Something went wrong...'; }
 				});
	return false; 
}


MfG
Boyge

Similar threads

Social bookmarks