kostenloser Webspace werbefrei: lima-city

AJAX: Formular im hintergrund senden?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   christian1603

   

   christian1603 hat kostenlosen Webspace.

   22:20, 14.5.2010

   Hallo LC,
   Ich brauche einen AJAX Script der ein Formular im Hintergrund an eine php Datei sendet. diese PHP Datei speichert das ganze dann in eine MYSQL DB. Mein Problem liegt beim Ajax XD ich bin seit Wochen am Googlen und habe nichts anständiges gefunden. Hat zufällig wer was passendes für mich? *Blinzel*
   LG
   Chrissi
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. nerdinator

   

   nerdinator hat kostenlosen Webspace.

   22:44, 14.5.2010

   Möglichkeit a) Benutze ein Framework. Beispielsweise habe ich damals mit Prototype angefangen.
   Möglichkeit b) Ein einfacher Ajax-Request ist ja nun nicht so schwer.
   

   <script type="text/javascript">
   <!--    
   	function AJAXsend(data, url){
   		var req = null;
   
   		try{req = new XMLHttpRequest();}
   		catch (ms){
   			try{req = new ActiveXObject("Msxml2.XMLHTTP");} 
   			catch (nonms){
   				try{req = new ActiveXObject("Microsoft.XMLHTTP");} 
   					catch (failed){req = null;}
   				} 
   		}
   		if (req == null) alert("Error creating request object!");
   		req.open("POST", url, true);
   		req.onreadystatechange = function(){            
   			switch(req.readyState) {
   			case 4:
   				if(req.status!=200) {
   					alert("Fehler:"+req.status); 
   				}else{    
   					alert(req.responseText);
   					document.getElementById('eins').innerHTML = '<strong>'+ req.responseText+'</strong>';
   				}
   				break;
   			default:
   				return false;
   				break;     
   			}
   		};
   		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   		req.send(data);
   	}
   //-->
   </script>

   (Ungetestet)
   Nur noch die zu sendenden POST-Daten in data, beispielsweise

   AJAXsend("foo=bar", "example.org/foobar.php");

   und das sollte funktionieren.
   
   Anhang:
   Ajax-Tutorial - einfach mal durcharbeiten.
   Prototype-Framework - mit vielen Beschreibungen.

4. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   1:24, 15.5.2010

   wenn du bei quirksmode in den Quelltext guckst, findet sich eine richtig feine Implementierung, ich hab sie mal etwas abgewandelt, damit es leichter zu verdauen ist!

   /*
    * Ajax, ganz easy und schöner codeaufbau, trotzdem umfangreich
    */
   ajax = (function(){
   	var ajaxFactories = function(){
   		return [
   			function(){return new XMLHttpRequest();},
   			function(){return new ActiveXObject("Msxml2.XMLHTTP");},
   			function(){return new ActiveXObject("Msxml3.XMLHTTP");},
   			function(){return new ActiveXObject("Microsoft.XMLHTTP");}
   		];
   	},
   	ajax = function(p){
   		p = p || {};
   		this.url = p.url || window.location;
   		this.method = p.method || 'GET';
   		this.callback = p.callback || function(){};
   		this.data = p.data;
   		var xmlhttp = false,
   		    factories = ajaxFactories(),
   		    i=0,
   		    l=factories.length;
   		for(;i<l;i++){
   			try{
   				xmlhttp = factories[i]();
   			}catch(e){
   				continue;
   			}
   			break;
   		}
   		this.xmlhttp = xmlhttp;
   	};
   	ajax.prototype = {
   		send: function(p){
   			if(p)
   				for(var i in p)
   					if(p.hasOwnProperty(i))
   						this[i]=p[i];
   			var post = this.method.toUpperCase() != 'GET' ? this.data : false,
   			    req = this.xmlhttp, callback = this.callback;
   			if(!post)
   				this.url += '?'+this.data;
   			req.open(this.method,this.url,true);
   			req.setRequestHeader('User-Agent','XMLHTTP/1.0');
   			if(post)
   				req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   			req.onreadystatechange = function(){
   				if(req.readyState != 4)return;
   				callback(req);
   			};
   			if(req.readyState == 4)return;
   			req.send(post);
   		}
   	}
   	return ajax;
   })()

   Aufrufen kannst du das ganze dann so, du definierst eine Variable, welche den request beinhalten soll:

   var request=new ajax({data:"foo=bar",url:"example.org/foobar.php"});

   Danach kannst du so viele request mit an verschicken wie du willst, und auch noch die Parameter verändern, wie du willst:

   request.send();
   request.send({data:"xyz=abc"});
   request.send({method:"GET"}); // statt dem Standard POST
   var zeigeAlert = function(){alert('Hallo Welt')}; // eine Funktion, als Beispiel
   request.send({callback:zeigeAlert}); // die Funktion ausführen, wenn der request abgeschlossen ist

   wie gesagt relativ einfach, sehr übersichtlicher code und sehr umfangreich, wenn man es denn haben will!
   
   Beitrag zuletzt geändert: 15.5.2010 1:36:27 von nemoinho

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?