Forum PHP.pl > [AJAX + PHP] Pobieranie danych i przesyłanie.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX + PHP] Pobieranie danych i przesyłanie.

Gazder

22.10.2011, 15:15:35

Witam, jako, że jestem w tym dość zielony proszę o małą pomoc.
Chciałem stworzyć Formularz Kontaktowy przez AJAX'a w połączeniu z PHP. Wszystko szło sprawnie, do momentu testów

Tyle co udało mi się na stukać:
AJAX:

[HTML] pobierz, plaintext 
		<script type="text/javascript">
		var XMLHttpRO = false;
 
		function PrzetwarzajDane() {
			xmlHttpRO = GetXmlHttpObject();
			var name = document.contact.name.value;
			var subject = document.contact.subject.value;
			var address = document.contact.address.value;
			var body = encodeURIComponent(document.contact.body.value);		
			xmlHttpRO.open("POST", "check_email.php");
			xmlHttpRO.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			XMLHttpRO.send('&name=' + name + '&subject=' + subject + '&address=' + address + '&body=' + body);
			xmlHttpRO.onreadystatechange = stateChanged;
		}
 
		function stateChanged() {
			if (xmlHttpRO.readyState == 4 || xmlHttpRO.readyState == "complete") {
				document.getElementById("edytor").innerHTML=xmlHttp.responseText;
			}
		}
 
		function GetXmlHttpObject() {
			var request = null;
			if (window.XMLHttpRequest) {
				request = new XMLHttpRequest();
			}
			else if (window.ActiveXObject) {
				request=new ActiveXObject("Microsoft.XMLHTTP");
			}
		return request;
		}
		</script>
[HTML] pobierz, plaintext

check_email.php PHP:

[PHP] pobierz, plaintext 
<?PHP
$freaky['config']['to'] = 'bomba9871@wp.pl';
if(isSet(!$_POST['name'] or !$_POST['subject'] or urldecode(!$_POST['body']))){
	echo("<html><script>alert('Nie mozna kontynuowac, przeoczyles/as wymagane pola!');</script></html>");
}
else{
	$freaky['header'] = 'From: $_POST['name'] <$_POST['address']>';
	$freaky['name'] = $_POST['name'];
	$freaky['subject'] = $_POST['subject'];
	$freaky['body'] = urldecode($_POST['body']);
	$contact = mail($freaky['config']['to'],$freaky['subject'],$freaky['body'],$freaky['header']);
	if($contact) {
		echo("<html><script>alert('Sukces! Informacje, ktore umiesciles w formularzu zostaly wyslane.');</script></html>");
	}
	else {
		echo("<html><script>alert('Blad! Nie można kontynuować(?).');</script></html>");
	}
}	
?>
[PHP] pobierz, plaintext

PHP:

[PHP] pobierz, plaintext 
				<?PHP
				echo '<style type="text/css">.submit { width:150px;height:30px; }</style>
				Currently, all the fields are required for a fast response.<br /><br />
				<form name="contact" method="post" action="">
				<table border="0" cellpadding="4" cellspacing="1" width="100%">
				<tr><td colspan="2"><span style="font-weight:bold;">Contact Form</span></td></tr>
				<tr><td width="20%">Name</td><td width="80%"><input type="text" name="name" /></td></tr>
				<tr><td>Subject</td><td><input type="text" name="subject" /></td></tr>
				<tr><td>E-mail</td><td><input type="text" name="address" /></td></tr>
				<tr><td>Message</td><td><textarea cols="40" rows="10" name="body"></textarea></td></tr>
				<td><input type="button" value="Wyślij" onclick="PrzetwarzajDane(value);" /></td><td><input type="reset" value="Wyczyść" class="submit" /></td></tr>
				</table>';
				?>
[PHP] pobierz, plaintext

Co jest źle? Dlaczego przy próbie wysłania formularza nic nie następuje? Żadnych błędów, wiadomości a e-mail nie wychodzi.
Proszę o pomoc, z góry dziękuję.

amii

22.10.2011, 18:30:53

1. Podstawowa sprawa, gdzie masz odpalaną funkcję PrzetwarzajDane w Twoim skrypcie widzę tylko przypisanie
var XMLHttpRO = false;

2. Sprawdzaj też status odpowiedzi na zasadzie + obsługa błędów:
if (myrequest.readyState==4 && myrequest.status==200) {
//do sth
}

Gazder

23.10.2011, 12:06:18

Nie wiem dokładnie o co chodzi z tym pierwszym podpkt., ale skasowałem w tym wypadku FALSE.
A funkcję wywołuję tu:

[PHP] pobierz, plaintext 
<td><input type="button" value="Wyślij" onclick="PrzetwarzajDane(value);" /></td><td><input type="reset" value="Wyczyść" class="submit" /></td></tr>
[PHP] pobierz, plaintext

Co do drugiego podpkt. to dodałem ten nowy warunek.
Znalazłem jeszcze jeden mały błąd, ale w efekcie czego dalej nie działa.
Proszę o pomoc, wkleję to co zmieniłem.

[HTML] pobierz, plaintext 
		<script type="text/javascript">
		var XMLHttpRO;
 
		function PrzetwarzajDane() {
			xmlHttpRO = GetXmlHttpObject();
			var name = document.contact.name.value;
			var subject = document.contact.subject.value;
			var address = document.contact.address.value;
			var body = encodeURIComponent(document.contact.body.value);		
			xmlHttpRO.open("POST", "check_email.php");
			xmlHttpRO.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			XMLHttpRO.send('&name=' + name + '&subject=' + subject + '&address=' + address + '&body=' + body);
			xmlHttpRO.onreadystatechange = stateChanged;
		}
 
		function stateChanged() {
			if ((xmlHttpRO.readyState == 4 || xmlHttpRO.readyState == "complete") && xmlHttpRO.status==200) {
				document.getElementById("edytor").innerHTML=xmlHttpRO.responseText;
			}
		}
 
		function GetXmlHttpObject() {
			var request = null;
			if (window.XMLHttpRequest) {
				request = new XMLHttpRequest();
			}
			else if (window.ActiveXObject) {
				request=new ActiveXObject("Microsoft.XMLHTTP");
			}
		return request;
		}
		</script>
[HTML] pobierz, plaintext

[PHP] pobierz, plaintext 
				<?PHP
				echo '<style type="text/css">.submit { width:150px;height:30px; }</style>
				Currently, all the fields are required for a fast response.<br /><br />
				<form name="contact" method="post" action="">
				<table border="0" cellpadding="4" cellspacing="1" width="100%">
				<tr><td colspan="2"><span style="font-weight:bold;">Contact Form</span></td></tr>
				<tr><td width="20%">Name</td><td width="80%"><input type="text" name="name" /></td></tr>
				<tr><td>Subject</td><td><input type="text" name="subject" /></td></tr>
				<tr><td>E-mail</td><td><input type="text" name="address" /></td></tr>
				<tr><td>Message</td><td><textarea cols="40" rows="10" name="body"></textarea></td></tr>
				<td><input type="button" value="Send" onclick="PrzetwarzajDane(value);" class="submit" /></td><td><input type="reset" value="Clear" class="submit" /></td></tr>
				</table></form>';
				?>
[PHP] pobierz, plaintext

[PHP] pobierz, plaintext 
<?PHP
$freaky['config']['to'] = 'bomba9871@wp.pl';
if(isSet(!$_POST['name'] or !$_POST['subject'] or urldecode(!$_POST['body']))){
	echo("<html><script>alert('Nie mozna kontynuowac, przeoczyles/as wymagane pola!');</script></html>");
}
else{
	$freaky['header'] = 'From: $_POST['name'] <$_POST['address']>';
	$freaky['name'] = $_POST['name'];
	$freaky['subject'] = $_POST['subject'];
	$freaky['body'] = urldecode($_POST['body']);
	$contact = mail($freaky['config']['to'],$freaky['subject'],$freaky['body'],$freaky['header']);
	if($contact) {
		echo("<html><script>alert('Sukces! Informacje, ktore umiesciles w formularzu zostaly wyslane.');</script></html>");
	}
	else {
		echo("<html><script>alert('Blad! Nie można kontynuować(?).');</script></html>");
	}
}	
?>
[PHP] pobierz, plaintext

amii

23.10.2011, 14:21:14

Uruchamiasz skrypt na localhost ?
1. Jeśli tak to poczytaj co piszą tutaj o statusie -> http://www.javascriptkit.com/jsref/ajax.shtml
2. Po za tym spróbuj wywalić: var XMLHttpRO;
3. encodeURIComponent - stosuj na wszystkie parametry, aktualnie tylko filtrujesz body
4. Co to za value jest przesyłane do PrzetwarzajDane w deklaracji funkcja nie przyjmuje żadnych parametrów
5. $freaky['header'] = 'From: $_POST['name'] <$_POST['address']>'; tu masz podwójne ciapki i w ogóle zły zapis albo escape albo stosuj naprzemiennie z "
powinno być tak:

[PHP] pobierz, plaintext 
$freaky['header'] = "From:". $_POST['name'] . "<". $_POST['address'].">";
[PHP] pobierz, plaintext

Gazder

23.10.2011, 14:54:43

Skrypty są na dedyku, więc wszystko powinno ładnie śmigać.
Dodałem poprawki i mam jeszcze jedno pytanie, za co odpowiada ten kawałek:

[HTML] pobierz, plaintext 
		function stateChanged() {
			if ((xmlHttpRO.readyState == 4 || xmlHttpRO.readyState == "complete") && xmlHttpRO.status==200) {
				document.getElementById("edytor").innerHTML=xmlHttpRO.responseText;
			}
		}
[HTML] pobierz, plaintext

Chodzi konkretnie o:
...getElementById("edytor")...

Bo ja to skopiowałem z jakiegoś innego kodu który był w necie.

DNSy mi się zwaliły i nie mogę teraz sprawdzić czy skrypt już działa, jak wszytko będzie działać to dam znać na czym stoimy

amii

23.10.2011, 15:05:10

Gazder tu jest pies pogrzebany

Ten kod doczepia zwrócony przez php fragment do div z id=edytor, jeśli takiego nie masz to nie dziwne, że nie działa. Swoją drogą takie podstawy wypadałoby już znać bo bez tego tego nie zajedziesz.

Gazder

29.10.2011, 10:10:31

Aha, no to ładnie

Stronka już mi działa, ale skrypt nie.

Amii czyli mam rozumieć że gdy dam np.:

[PHP] pobierz, plaintext 
<td><div id="edytor">Tekst</div></tr>
[PHP] pobierz, plaintext

To w tymże miejscu pojawi się wynik tego całego AJAX'a?
Czyli np. ujrzę:

Cytat

Blad: Nie można kontynuować, przeoczyłeś/aś wymagane pola!

Jeśli to tak ma działać, to trochę kiepawo, bo chciałem aby błędy nie były wypisywane w danym miejscu tylko wyskakiwały okienka alert z wynikiem AJAX'a (alert('Nie mozna kontynuowac, przeoczyles/as wymagane pola!')

Co może być źle skoro dalej nie trybi?
Wkleje kody.

[HTML] pobierz, plaintext 
		<script type="text/javascript">	
		function PrzetwarzajDane() {
			xmlHttpRO = GetXmlHttpObject();
			var name = encodeURIComponent(document.contact.name.value);
			var subject = encodeURIComponent(document.contact.subject.value);
			var address = encodeURIComponent(document.contact.address.value);
			var body = encodeURIComponent(document.contact.body.value);
			xmlHttpRO.open("POST", "check_email.php");
			xmlHttpRO.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			XMLHttpRO.send('&name=' + name + '&subject=' + subject + '&address=' + address + '&body=' + body);
			xmlHttpRO.onreadystatechange = stateChanged;
		}
 
		function stateChanged() {
			if ((xmlHttpRO.readyState == 4 || xmlHttpRO.readyState == "complete") && xmlHttpRO.status==200) {
				document.getElementById("edytor").innerHTML=xmlHttpRO.responseText;
			}
		}
 
		function GetXmlHttpObject() {
			var request = null;
			if (window.XMLHttpRequest) {
				request = new XMLHttpRequest();
			}
			else if (window.ActiveXObject) {
				request=new ActiveXObject("Microsoft.XMLHTTP");
			}
		return request;
		}
		</script>
[HTML] pobierz, plaintext

[PHP] pobierz, plaintext 
				<?PHP
				echo '<style type="text/css">.submit { width:150px;height:30px; }</style>
				Currently, all the fields are required for a fast response.<br /><br />
				<form name="contact" method="post" action="">
				<table border="0" cellpadding="4" cellspacing="1" width="100%">
				<tr><td colspan="2"><span style="font-weight:bold;">Contact Form</span></td></tr>
				<tr><td width="20%">Name</td><td width="80%"><input type="text" name="name" /></td></tr>
				<tr><td>Subject</td><td><input type="text" name="subject" /></td></tr>
				<tr><td>E-mail</td><td><input type="text" name="address" /></td></tr>
				<tr><td>Message</td><td><textarea cols="40" rows="10" name="body"></textarea></td></tr>
				<td><input type="button" value="Send" onclick="PrzetwarzajDane();" class="submit" /></td><td><input type="reset" value="Clear" class="submit" /></td></tr>
				<td><div id="edytor">Tekst?</div></tr>
				</table></form>';
				?>
[PHP] pobierz, plaintext

[PHP] pobierz, plaintext 
<?PHP
$freaky['config']['to'] = 'xsalon@wp.pl';
if(isSet(!$_POST['name'] or !$_POST['subject'] or urldecode(!$_POST['body']))){
	echo "<font color='red'>Blad:</font> Nie można kontynuować, przeoczyłeś/aś wymagane pola!";
}
else{
	$freaky['header'] = 'From: '.$_POST['name'].' <'.$_POST['address'].'>';
	$freaky['name'] = ''.$_POST['name'].'';
	$freaky['subject'] = ''.$_POST['subject'].'';
	$freaky['body'] = 'urldecode($_POST['body'])';
	$contact = mail($freaky['config']['to'],$freaky['subject'],$freaky['body'],$freaky['header']);
	if($contact) {
		echo "<font color='green'>Sukces!</font> Informacje, które umieściłeś w formularzu zostały wysłane.";
	}
	else {
		echo "<font color='red'>Blad:</font> Nie można kontynuować(?).";
	}
}	
?>
[PHP] pobierz, plaintext

Odświeżam. Dalej potrzebuje pomocy.

Odświeżam. Dalej potrzebuje pomocy.

amii

29.10.2011, 11:59:28

Gazder popróbuj trochę sam masz tu proste tutoriale do AJAX:
http://www.w3schools.com/ajax/default.asp
http://www.javascriptkit.com/jsref/ajax.shtml
po polsku:
http://gajdaw.pl/ajax/wprowadzenie/p1.html

Od siebie dodam, że tu masz tak:
XMLHttpRO.send('&name=' + name + '&subject=' + subject + '&address=' + address + '&body=' + body);
a powinno być tak (poświęciłem na to pół minuty i zajrzałem w tutoriala):
XMLHttpRO.send('name=' + name + '&subject=' + subject + '&address=' + address + '&body=' + body);
Po za tym jeśli nie będzie działać pozmieniaj wszystko w/g przykładów z kursów i powstawiaj tylko swoje dane specyficzne dla formularza i wartości parametrów. Listuje błędy, testuj. To są absolutne podstawy.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.