✔ XMLHttpRequest: PHP weiterleitung -> nur ein aktualisieren

StupidBoy

StupidBoy

Mitglied Gold
Guten Abend, oder besser gesagt gute Nacht.

Ich beschäftige mich gerade ein wenig mit AJAX als ersatz für die klassischen, von vielen gehassten Framesets.
Das ganze läuft auch schon recht flüssig, seiten werden mittels XMLHttpRequest aufgerufen und in ein DIV meiner statischen index.html geschrieben - wunderbar.
Nun habe ich zu Testzwecken mal probiert ein kleines PHP-Form-Script vernünftig mit AJAX zu nützen. Die Funktionsweise des Scripts ist simpel. Beim versenden ruft sich die Seite selbst auf, die Eingaben werden überprüft, wenn sie vollständig/valide sind gehts per header() zur nächsten Seiten, sind sie falsch wird das Formular wieder angezeigt und der User muss seine Eingaben korrigieren.
Das Problem stellt sich nun wie folgt dar: Sobald mit PHP eine neue/die selbe Seite aufgerufen wird, wird natürlich die ganze Seite aktualisiert und nicht nur der Inhalt des "Content"-Divs, der ganze Sinn und Zweck des AJAX-Scripts wird also konterkariert.
Nun meine eigentliche Frage: Wie ist es möglich, ist es überhaupt möglich, dass die Seite die PHP aufruft nur im entsprechenden DIV gespeichert wird ohne dass die ganze Seite neu geladen wird?

Ich habe, in Ermangelung anderer Ideen, schon darüber nachgedacht per PHP eine Datei zu erzeugen und auf den Webserver zu hinterlegen und gleichzeitig mit XMLHttpRequest auf die Existenz dieser Datei zu prüfen bis sie tatsächlich vorhanden ist und dann das ganze ins DIV zu laden, sauber finde ich diese Lösung aber nicht und ich denke, dass es doch eigentlich noch andere Möglichkeiten geben müsste, schließlich ist die Kombination PHP/AJAX ja nicht ganz ungebräuchlich und das Problem müsste sich doch eigentlich öfter stellen.

Für Denkanstöße, Schlagwörter etc. bin ich dankbar.

MfG
 
Ich bin nicht sicher, ob ich Dich jetzt richtig verstanden habe aber was hältst Du davon, das Formular nicht direkt zu versenden, sondern onclick die Eingegebenen Daten via JavaScript zu überprüfen. Dementsprechend kannst Du dann entweder das Formular in dem DIV mit Fehlermeldungen ergänzen, oder einfach den neuen inhalt in das Div einbinden.
 
Ich hoffe du hast mich richtig verstanden, ich kann dir aber leider nicht ganz folgen.
Das PHP-Script hat im wesentlichen zwei Aufgaben: Überprüfen der Eingaben und zweitens versenden einer E-Mail.
Weder Schritt eins noch Schritt zwei kommt ohne serverseitiges Script aus. Javascript käme da aus meiner Sicht nur für eine erste Prüfung der Daten in Frage. Selbst wenn man dies nun tun würde, so bliebe doch das Problem, dass das PHP-Script sich selbst aufruft, alles richtig ausgefüllt ist zu einer "Vielen Dank"-Seite weiterleitet (header()) oder andernfalls einfach das Formular erneut ausgegeben wird und in keinem der Fälle die neue/alte Seite im "Content-Div" geladen wird sondern natürlich die ganze Seite neu geladen wird.

Vielleicht mache ich aber auch nur einen fundamentalen Denkfehler da mir die ganze AJAX-Technik doch noch ziemlich fremd ist.

MfG

Achja, vielleicht ist ein Code-Schnipsel hilfreich beim Verständnis meines Problems:

So sieht das Formscript (gekürzt) zur Zeit noch aus:
PHP: 
<?php
	session_start();
	
	if ( isset( $_POST["do"] ) && $_POST["do"] == "check" )
	{
	  $error_msg	=	"";
	    //Eingaben prüfen 
		//.
		//.
		//.
		
			//Wenn alles korrekt Email senden 
			if ( $error_msg == "")
			{
			  $_SESSION["name"]		=	$_POST["name"];
			  $_SESSION["email"]	=	$_POST["email"];

			  $to		= $_SESSION["email"] . ', ';
			  $to	   .= "";
			  $subject	= "Subject";
			  $message 	= "Soso...";
			  $headers  = 'MIME-Version: 1.0' . "\r\n";
			  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
			  $headers .= 'From: me' . "\r\n";
			  mail($to, $subject, $message, $headers);

			  
			  //Und ab zu nächsten Seite
			  header('Location: http://localhost:81/localhost/jsContent/contact/ref.php');
			  exit();
			}	  
    }
?>	
	   	<!--- Form Start -->
		<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" name="FormName">
		<table id="contacttable">
		<?php
			if ( isset($error_msg))
			{
			  echo '<br /><tr><td class="error" colspan="2">' . $error_msg . "</td></tr>";
			}
		?>	
		<tr><td class="leftcolumn"><label>Name<font color="#FF0000">*</font>: </label></td><td class="rightcolumn"><input type="text" name="name" value="<?php echo $_POST['name']; ?>" size="40"></td></tr>
		<tr><td class="leftcolumn"><label>Email<font color="#FF0000">*</font>: </label></td><td class="rightcolumn"><input type="text" name="email" value="<?php echo $_POST['email']; ?>" size="40"></td></tr>
		<tr><td class="leftcolumn">Sicherheitscode<font color="#FF0000">*</font>:<br /><img src="contact/CaptchaSecurityImages.php?width=150&height=50&character=5" /></td><td class="rightcolumn"><input id="security_code" name="security_code" type="text" /></td></tr>
		<tr><td class="button"><input type="hidden" name="do" value="check"></td><td class="button"><input type="submit" name="submitButtonName" value="Absenden" /></td></tr>		
		</table>
	</form>
	<!--- Form End-->

Das ist das Javascript (ebenfalls leicht gekürzt):
Code: 
			var xmlHTTP = null;
			if(window.XMLHttpRequest){
				xmlHTTP = new XMLHttpRequest();
			}
			else if (window.ActiveXObject){
				try{
					xmlHTTP = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(ex){
					try{
						xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch(ex){
						
					}
				}
			}
			function updateContent(){
				var data 	= document.getElementById("dataBox");
				var status 	= document.getElementById("statusBox");
				if (xmlHTTP.status == 200) {
				data.innerHTML = xmlHTTP.responseText;
				}
			}
			function getContent(adresse){
				xmlHTTP.open("GET",adresse);
				xmlHTTP.onreadystatechange = updateContent;
				xmlHTTP.send(null);
			}
 
Zuletzt bearbeitet:
Das überprüfen der Eingabe mittels JavaScript sollte kein Problem darstellen.
Nach erfolgreicher überprüfung kannst Du doch mittels AJAX diese Daten an eine PHP-Datei schicken, die die Mail im Hintergrund abschickt.

So in etwa. Ist vielleicht nicht der eleganteste Code, aber so sollte es funktionieren. Du brauchst dann nur noch ein PHP-Skript, dass die Captchaeingabe überprüft und entsprechend 0 oder 1 zurück gibt, und eins, dass die Mail abschickt und den Text der nach erfolgreichem versenden erscheinen soll ausgibt.

HTML: 
<script type="text/javascript" language="javascript">
<!--

var requestcaptcha = false;
var captchacheck = 0;
function checkcaptcha(captcha) 
{
	if (window.XMLHttpRequest) 
	{
		requestcaptcha = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		try 
		{
			requestcaptcha = new ActiveXObject('Msxml2.XMLHTTP');
		} 
		catch (e) 
		{
			try 
			{
				requestcaptcha = new ActiveXObject('Microsoft.XMLHTTP');
			} 
			catch (e) 
			{}
		}
	}
	if (!requestcaptcha) 
	{
		alert("XMLHTTP-Instanz konnte nicht erzeugt werden");
		return false;
	} 
	else 
	{
		requestcaptcha.open('post', "captchacheck.php", true);
		requestcaptcha.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		requestcaptcha.send('captcha='+captcha);
		requestcaptcha.onreadystatechange = interpretRequest;
	}
}
function interpretcaptcha() 
{
	switch (requestcaptcha.readyState) 
	{
		case 4:
		if (requestcaptcha.status != 200) 
		{
			alert(requestcaptcha.status);
		} 
		else 
		{
			captchacheck = requestcaptcha.responseText;
		}
		break;
		default:
		break;
	}
}

var err = '';
function checkform()
{
	...
	...
	...
	checkcaptcha(document.getElementById('security_code').value);
	if(captchacheck!=1)
	{
		err += 'Falsches Captcha';
	}
	if(err=='')
	{
		setRquest();
	}
	else
	{
		document.getElementById('form_div').innerHTML = err + document.getElementById('form_div').innerHTML
	}
}

var request = false;
function setRequest() 
{
	if (window.XMLHttpRequest) 
	{
		request = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		try 
		{
			request = new ActiveXObject('Msxml2.XMLHTTP');
		} 
		catch (e) 
		{
			try 
			{
				request = new ActiveXObject('Microsoft.XMLHTTP');
			} 
			catch (e) 
			{}
		}
	}
	if (!request) 
	{
		alert("XMLHTTP-Instanz konnte nicht erzeugt werden");
		return false;
	} 
	else 
	{
		var name = document.getElementById('name').value;
		...
		...
		request.open('post', "mail.php", true);
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		request.send('name=' + name '&email=' + .....);
		request.onreadystatechange = interpretRequest;
	}
}
function interpretRequest() 
{
	switch (request.readyState) 
	{
		case 4:
		if (request.status != 200) 
		{
			alert(request.status);
		} 
		else 
		{
			document.getElementById('form_div').innerHTML = request.responseText;
		}
		break;
		default:
		break;
	}
}

//-->
</script>
</head>
<body>
<div id="form_div">
<table id="contacttable">
	<tr>
    	<td class="leftcolumn"><label>Name<font color="#FF0000">*</font>: </label></td>
        <td class="rightcolumn"><input type="text" id="name" value="<?php echo $_POST['name']; ?>" size="40"></td>
	</tr>
    <tr>
    	<td class="leftcolumn"><label>Email<font color="#FF0000">*</font>: </label></td>
        <td class="rightcolumn"><input type="text" id="email" value="<?php echo $_POST['email']; ?>" size="40"></td>
	</tr>
   	<tr>
    	<td class="leftcolumn">Sicherheitscode<font color="#FF0000">*</font>:<br />
        	<img src="contact/CaptchaSecurityImages.php?width=150&height=50&character=5" />
		</td>
        <td class="rightcolumn"><input id="security_code" name="security_code" type="text" /></td>
    </tr>
   	<tr>
    	<td class="button"><input type="hidden" id="do" value="check"></td>
        <td class="button"><input type="button" name="submitButtonName" onclick="checkform" value="Absenden" /></td>
	</tr>        
</table>
</div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück