Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] Działa, ale wyświetla kod strony, zamiast żądanego zdania
Forum PHP.pl > Forum > XML, AJAX
arlid
16.12.2013, 19:11:13
Witajcie. Mam pewien problem z AJAXem. Nie do końca znam się na tym (właściwie to dopiero zaczynam z tym przygodę. Chciałbym to zaimplementować do formularza logowania, gdzie po zalogowaniu (bądź nie) nad przyciskiem zaloguj pojawi się stosowny komunikat - oczywiście bez przeładowania strony, ładnie sobie "wyjeżdżając". Ale zanim do tego dojdę chciałem ogólnie zapoznać się z tematem i zrobić coś prostego. I tak mam pliki:

test.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.   <head>
  4.     <title>Bez nazwy</title>
  5.     <meta charset="UTF-8">
  6.     <script type="text/javascript" src="jquery.js"></script>
  7.  
  8.     <!-- SKRYPT AJAX WYŚWIETLA OKNO ALERT Z ZAWARTOŚCIĄ POLA INPUT O NAZWIE tresc_testowa -->
  9.     <script type="text/javascript">
  10. 	jQuery(document).ready(function() {
  11.  
  12.   <!--  Po wciśnięciu obiektu (button KLIK) o id=wyswietl_alert  -->
  13. 		$("#wyswietl_alert").click(function() {
  14.  
  15.     <!-- pobierz tekst z pola input o nazwie name=tresc_testowa -->
  16. 			var wiadomosc = $('input[name=tresc_testowa]').val();
  17.  
  18.       //wyswietl tekst z inputa name=tresc_testowa w okie alertowym
  19. 			alert(wiadomosc);
  20. 		});
  21. 	});
  22. 	</script>
  23.  
  24.  
  25.   </head>
  26.   <body>
  27.  
  28.     <form action="" method="post">
  29.       <input name="tresc_testowa" type="text">
  30.       <input type="button" id="wyswietl_alert" name="wyswietl_alert" value="KLIK" />
  31.     </form>
  32.  
  33.       </body>
  34. </html>
[HTML] pobierz, plaintext


I Super, wszystko działa. Wpisany tekst pojawia mi się wyskakującym okienku. Teraz chciałem to zmodyfikować, żeby wyświetlić to pod spodem (z użyciem PHP do obróbki formularza - ustawiłem warunek), ale nie chce mi to działać. Oto pliki

test.html 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.   <head>
  4.     <title>Bez nazwy</title>
  5.     <meta charset="UTF-8">
  6.     <script type="text/javascript" src="jquery.js"></script>
  7.  
  8.     <!-- SKRYPT AJAX WYŚWIETLA OKNO ALERT Z ZAWARTOŚCIĄ POLA INPUT O NAZWIE tresc_testowa -->
  9.     <script type="text/javascript">
  10. 	jQuery(document).ready(function() {
  11.  
  12.   <!--  Po wciśnięciu obiektu (button KLIK) o id=wyswietl_alert  -->
  13. 		$("#wyswietl_alert").click(function() {
  14.  
  15.     <!-- pobierz tekst z pola input o nazwie name=tresc_testowa -->
  16. 			var wiadomosc = $('input[name=tresc_testowa]').val();
  17.  
  18.       //wyswietl tekst z inputa name=tresc_testowa w divie #tu_pokaz_wiadomosc
  19. 	$.ajax({
  20. 				url: "przetworz.php",
  21. 				type: "POST",
  22. 				data: "wiadomosc="+tekst,
  23. 				success: function(wdm) {
  24. 					$("#tu_pokaz_wiadomosc").text(wdm);
  25. 				}
  26. 			});
  27. 		});
  28. 	});
  29. 	</script>
  30. 	</script>
  31.  
  32.  
  33.   </head>
  34.   <body>
  35.  
  36.     <form action="" method="post">
  37.       <input name="tresc_testowa" type="text">
  38.       <input type="button" id="wyswietl_alert" name="wyswietl_alert" value="KLIK" />
  39.     </form>
  40.     <div id="tu_pokaz_wiadomosc"></div>
  41.  
  42.   </body>
  43. </html>
[HTML] pobierz, plaintext


przetworz.php

[PHP] pobierz, plaintext 
  1. <?php
  2. //Zmienna wiadomosc pobiera wartość 
  3. $wiadomosc=$_POST['wiadomosc'];
  4.  
  5. // Sprawdzam czy istnieje "wiadomosc""
  6. if(!isset($wiadomosc)) {
  7. // Jeżeli nie, błąd
  8. 	echo'Nie ma wiadomości';
  9. } else {
  10. //W przeciwnym wypadku
  11. 	echo'Twoja wiadomość to $wiadomosc';
  12. }
  13. ?>
[PHP] pobierz, plaintext


Wszystko byłoby ok, co prawda ajax działa, ale zamiast jakiegoś komunikatu z pliku przetworz.php wyświetla mi pod spodem kod strony test.html. Dlaczego tak sie dzieje?

Czy mogę zamiast 

[JAVASCRIPT] pobierz, plaintext 
  1. <!--  Po wciśnięciu obiektu (button KLIK) o id=wyswietl_alert  i polu name=wyswietl_alert-->
  2. 		$("#wyswietl_alert").click(function() {
  3. <!-- Ewentualna treść  -->
  4. }
[JAVASCRIPT] pobierz, plaintext


Zrobić tak

[JAVASCRIPT] pobierz, plaintext 
  1. <!--  Po wciśnięciu obiektu (button KLIK) o id=wyswietl_alert  i polu name=wyswietl_alert-->
  2. 		$('input[name=wyswietl_alert]').click(function() {
  3. <!-- Ewentualna treść  -->
  4. }
[JAVASCRIPT] pobierz, plaintext


Czy to jest poprawnie? Dziękuję za wszelką pomoc i porady smile.gif
mis
18.12.2013, 23:04:54
'Czy mogę (...) zrobić tak' - Tak możesz.

Co do reszty, jest ok tylko mały szczegół:
[PHP] pobierz, plaintext 
  1. data: "wiadomosc="+tekst,
[PHP] pobierz, plaintext


zmień na

[PHP] pobierz, plaintext 
  1. data: "wiadomosc="+wiadomosc,
[PHP] pobierz, plaintext


aha i jeszcze jedna zmiana w php:

echo "Twoja wiadomość to $wiadomosc"; <- poprawnie bądź
echo 'Twoja wiadomość to'. $wiadomosc;
arlid
19.12.2013, 18:17:43
Dzięki za pomoc. Mimo tego nadal po naciśnięciu przycisku wyświetla mi kod strony. Co prawda w odpowiednim miejscu podstawiana jest wartość zmiennej $wiadomosc z okienka, jednak oprócz niej jest cały kod jakby w plaintexcie. Czyżby wersja jQuery? Raczej chyba nie, bo podmieniałem na inną (starszą) i to nic nie zmienia.
werdan
19.12.2013, 19:50:44
U mnie działa OK. Na czym to uruchamiasz? Na serwerze WWW czy nie? biggrin.gif
arlid
20.12.2013, 15:59:21
Tak, co prawda na darmowym hostingu, ale tylko w celach sprawdzenia. Chyba, że mogą na to mieć wpływ reklamy (ich kod?). Kiedyś znalazłem fajny artykuł i była tam paczka do pobrania nawet na USB z fajnym panele i miało się prosto swój serwer lokalny. Niestety nie pamiętam, gdzie ten artykuł znalazłem. Swoją drogą jak jest z bezpieczeństwem takiego domowego serwera i dostępem z zewnątrz?

Jak uprosić ten fragment:

[PHP] pobierz, plaintext 
  1. data: "wiadomosc="+wiadomosc,
[PHP] pobierz, plaintext


w przypadku, gdyby było więcej pól formularza tak by nie pisać tego z ręki? Jest na to jakiś sposób?
Scalak
21.12.2013, 16:19:40
reklamy...
dodaj w swoim odpytywanym pliku php na samym początku:
<?php header('Content-Type: text/plain'); ?>
powinno pomóc.

Pozdrawiam
Scalak
arlid
21.12.2013, 17:03:02
No, i problem rozwiązany smile.gif Dzięki, nie pomyślałem o takim rozwiązaniu.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.