Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript] Wysłanie formularza bez przeładowania strony
Forum PHP.pl > Forum > Przedszkole
kubek3898
28.01.2013, 17:25:18
Na początku od razu mówię, użyłem szukajki, niestety nie znalazłem to czego szukam wink.gif

Mam następujący kod:

[HTML] pobierz, plaintext 
  1. <body id='body_screen' class='login_screen'>
  2. <form action='login.php' method='post'>
  3. <div id='login' class=''>
  4. <div id='login_error'>Dane użyte podczas logowania nie były poprawne</div>
  5. 	<div id='login_controls'>
  6. 		<label for='username'>Użytkownik</label>
  7. 		<input type='text' size='20' id='username' name='username' value='' class='textinput'>
  8.  
  9. 		<label for='password'>Hasło</label>
  10. 		<input type='password' size='20' id='password' name='password' value='' class='textinput'>	</div>
  11. 	<div id='login_submit'>
  12. 		<input type='submit' class='button' value="Zaloguj" />
  13. 	</div>
  14.     </div>
  15. </form>		
  16. </div>
  17. </body>
[HTML] pobierz, plaintext


I teraz jak za pomocą AJAX'a zrobić tak, że po kliknięciu "Zaloguj" strona nie przeładowuje się tylko zostaje wypisany stosowny komunikat:

[HTML] pobierz, plaintext 
  1. <div id='login_error'>Dane użyte podczas logowania nie były poprawne</div>
[HTML] pobierz, plaintext


lub 

[HTML] pobierz, plaintext 
  1. <div id='login_ok'>Zalogowano!</div>
[HTML] pobierz, plaintext



"Raczkuję" jak widać w temacie JS oraz AJAX, więc proszę o pomoc.
nospor
28.01.2013, 17:40:58
Cytat
Na początku od razu mówię, użyłem szukajki, niestety nie znalazłem to czego szukam
Wyjątkowo starałeś się nic nie znaleźć.... na temat ajaxa jest tyle materiału że szok....

Zainteresuj się biblioteką jQuery. Z nią AJAX to pestka. Gdy opanujesz przykłady udostępnione na stronie jQuery, wróć do problemu z logowaniem. Tym czasem naukę czas zacząć.
kubek3898
30.01.2013, 17:56:48
Studiuję teraz książkę "JavaScript i jQuery - Nieoficjalny podręcznik", więc mam nadzieję, że znajdę rozwiązanie.


W necie może i jest tego masa, ale każda próba modyfikacji przeze mnie skończyła się fiaskiem.

Witam ponownie,

poczytałem trochę o Ajaxie oraz samym JS i wyszło takie cuś:

[HTML] pobierz, plaintext 
  1. <body id='ipboard_body' class='login_screen'>
  2. <div id="infoMassage"></div>
  3. <div id="logFrom">
  4. <form action='java script:logowanie();'>
  5. <div id='login' class=''>
  6. 	<div id='login_controls'>
  7. 		<label for='nick'>Login</label>
  8. 		<input type='text' size='20' id='nick' name='nick' value='' class='textinput'>
  9.  
  10. 		<label for='pass'>Hasło</label>
  11. 		<input type='password' size='20' id='pass' name='pass' value='' class='textinput'>	</div>
  12. 	<div id='login_submit'>
  13. 		<input type='submit' class='button' value="Zaloguj" />
  14. 	</div>
  15.     </div>
  16. </form>	
  17. </div>
  18. </div>
  19. </body>
[HTML] pobierz, plaintext


oraz sam kod JS:

[PHP] pobierz, plaintext 
  1. function logowanie()
  2. {
  3. 	var nick = document.getElementById("nick").value;
  4. 	var infoMassage = document.getElementById("login");
  5. 	var pass = document.getElementById("pass").value;
  6.  
  7. 	if(nick == '')
  8. 	{
  9. 		//infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano loginu.</div>';
  10. 		$('#login').append('<div id=\'login_error\'>Nie podano loginu.</div>');
  11. 		//$('login').append('<p>Test</p>');
  12. 	}
  13. 	else if(pass == '')
  14. 	{
  15. 		infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano hasła.</div>';
  16. 	}
  17. 	else
  18. 	{
  19. 		var myLogAjax = new Ajax.Request('../check.php',
  20. 		{
  21. 			method: 'post',
  22. 			parameters: "nick="+nick+
  23. 						"&pass="+pass,
  24. 			onComplete: showResponseLog,
  25. 			onFailure: showAlertLog
  26. 		}
  27. 		);
  28. 	}
  29. }
  30. function showResponseLog(text)
  31. {
  32. 	var infoMassage = document.getElementById("infoMassage");
  33. 	var logFrom = document.getElementById("logFrom");
  34.  
  35. 	if(text.responseText=='1')
  36. 	{
  37. 		infoMassage.innerHTML  = 'Błąd: <b>Takie konto nie istnieje, bądz jest nie aktywne</b>';
  38. 	}
  39. 	else
  40. 	{        
  41. 		logFrom.innerHTML  = 'Zostałeś zalogowany jako: '+text.responseText+'. Dziękujemy';
  42. 	}
  43. }
  44. function showAlertLog(MyRequest) 
  45. {
  46. 	var infoMassage = document.getElementById("infoMassage");
  47. 	infoMassage.innerHTML  = 'Błąd: <b>Błąd podczas logowania</b>';
  48. }
[PHP] pobierz, plaintext


Wszystko spoko, tylko że aż wstyd się przyznać do jednej rzeczy. A mianowicie:

[PHP] pobierz, plaintext 
  1. 	var nick = document.getElementById("nick").value;
  2. 	var infoMassage = document.getElementById("login");
  3. 	var pass = document.getElementById("pass").value;
  4.  
  5. 	if(nick == '')
  6. 	{
  7. 		//infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano loginu.</div>';
  8. 		$('#login').append('<div id=\'login_error\'>Nie podano loginu.</div>');
  9. 		//$('login').append('<p>Test</p>');
  10. 	}
  11. 	else if(pass == '')
  12. 	{
  13. 		infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano hasła.</div>';
  14. 	}
[PHP] pobierz, plaintext


Na początku miałem dobrze jakoś zrobiłem tak, że wyświetlał się komunikat bez znikania formularza logowania. Jednak... albo nie zapisałem pliku, albo coś, lecz teraz po kliknięciu: Zaloguj usuwa się formularz, a wyświetla komunikat. Modyfikowałem 12434234234234 razy, raz to stosując funkcję append(), raz to prepend() nic nie dało. Proszę o pomoc! Jak zrobić, by po kliknięciu zaloguj robiło się:

[HTML] pobierz, plaintext 
  1. <body id='ipboard_body' class='login_screen'>
  2. <div id="infoMassage"></div>
  3. <div id="logFrom">
  4. <form action='java script:logowanie();'>
  5. <div id='login' class=''>
  6. <div id=\'login_error\'>Nie podano loginu.</div>
  7. 	<div id='login_controls'>
  8. 		<label for='nick'>Login</label>
  9. 		<input type='text' size='20' id='nick' name='nick' value='' class='textinput'>
  10.  
  11. 		<label for='pass'>Hasło</label>
  12. 		<input type='password' size='20' id='pass' name='pass' value='' class='textinput'>	</div>
  13. 	<div id='login_submit'>
  14. 		<input type='submit' class='button' value="Zaloguj" />
  15. 	</div>
  16.     </div>
  17. </form>	
  18. </div>
  19. </div>
  20. </body>
[HTML] pobierz, plaintext


a nie:

[HTML] pobierz, plaintext 
  1. <body id='ipboard_body' class='login_screen'>
  2. <div id="infoMassage"></div>
  3. <div id="logFrom">
  4. <form action='java script:logowanie();'>
  5. <div id='login' class=''>
  6. <div id=\'login_error\'>Nie podano loginu.</div>
  7. </form>	
  8. </div>
  9. </div>
  10. </body>
[HTML] pobierz, plaintext
ethann
30.01.2013, 18:16:45
Kod
<form action='java script:logowanie();'>

zmień(java script) na(javascript, pisane łącznie):
albo ustaw funkcję onsubmit lub zrób button, który wykonuje funkcję logowanie() po kliknięciu.

A ta linijka działa bardzo dobrze(chociaż powinieneś zmienić na prepend, żeby uzyskać wymagany efekt):
Kod
$('#login').append('<div id=\'login_error\'>Nie podano loginu.</div>');



#edit
Upewnij się, że nie używasz nigdzie innerHTML, bo on zmienia całą zawartość kontenera.
kubek3898
30.01.2013, 18:24:53
Jak zmienię, ze spacją to mi adres strony wywala na: http://localhost/lalala/java script:logowanie%28%29;?nick=&pass=

oraz treść strony:

Zabroniony dostęp!

Nie masz dostępu do żądanego obiektu. Jest on zabezpieczony przed odczytem lub nie może być odczytany przez serwer.

Jeśli myślisz, że jest to błąd tego serwera, skontaktuj się z administratorem.
Error 403
localhost
Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7

A co do append() i komunikatu to nadal, nie działa, nawet tak jak podałeś. Po prostu nic się nie wyświetla.
ethann
30.01.2013, 18:32:31
Na pewno dołączyłeś bibliotekę JQuery?
Podam Ci przykładowy kod użycia funkcji prepend, która pozwoli Ci uzyskać wymagany efekt.
Kod
<html>
<head>
<script type=text/javascript src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type=text/javascript>
function logowanie()
{
    if($('#nick').val() == '')
    {
        $('#login').prepend('<div id=\'login_error\'>Nie podano loginu.</div>');
    }
    else
    {
        $('#login').prepend('<div id=\'login_error\'>Podano login.</div>');
    }
}
</script>
</head>
<body>
<form action="java script:logowanie();">
    <div id='login'>
        <label for='nick'>Login</label>
        <input type='text' size='20' id='nick' name='nick' value=''>
        <input type='submit' class='button' value="Zaloguj" />
    </div>
</form>
</body>
</html>


ewentualnie możesz zrobić nowy div i do niego dopisywać treści.
Kod
<html>
<head>
<script type=text/javascript src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type=text/javascript>
function logowanie()
{
    if($('#nick').val() == '')
    {
        $('#error').text('Nie podano loginu.');
    }
    else
    {
        $('#error').text('Podano login.');
    }
}
</script>
</head>
<body>
<form action="java script:logowanie();">
    <div id='login'>
        <div id='error'></div>
        <label for='nick'>Login</label>
        <input type='text' size='20' id='nick' name='nick' value=''>
        <input type='submit' class='button' value="Zaloguj" />
    </div>
</form>
</body>
</html>
kubek3898
30.01.2013, 18:41:52
Tak na pewno jest dołączona.

I nadal nic. Zrobiłem tak jak Ty podałeś, bez dołączania zew. pliku, ale... nic. Dalej nie wyświetla się stosowny komunikat.
ethann
30.01.2013, 18:48:52
Przetestuj którykolwiek z przykladów podanych przeze mnie bez wprowadzania żadnych zmian i powiedz jakie były efekty.
Z jakiej przeglądarki korzystasz?
Twój plik z jquery na pewno jest sprawny?
Przeglądarka nie wyrzuca żadnych błędów JS?
kubek3898
2.02.2013, 17:29:10
Dobra przeniosłem skrypt na innny hosting i o dziwo działa! Jednak teraz mam kolejny problem. Po wypełnieniu danych, powinna zostać uruchomiona dalsza część funkcji logowanie(); tj.

[PHP] pobierz, plaintext 
  1. else
  2. 	{
  3. 		var myLogAjax = new Ajax.Request
  4. 		(
  5. 		'check.php',
  6. 		{
  7. 			method: 'post',
  8. 			parameters: "nick="+nick+
  9. 			"&pass="+pass,
  10. 			onComplete: showResponseLog,
  11. 			onFailure: showAlertLog
  12. 		}
  13. 		);
  14. 	}
[PHP] pobierz, plaintext


która odpowiada za przesłanie do pliku 'check.php' parametrów logowania. Oczywiście w bazie mam tabelę, a w niej rekord z przykładowym kontem, ale po wpisaniu poprawnych danych... nic się nie dzieje. Proszę o pomoc.

Plik login.js:

[PHP] pobierz, plaintext 
  1. function logowanie()
  2. {
  3. 	var nick = document.getElementById("nick").value;
  4. 	var pass = document.getElementById("pass").value;
  5.  
  6.     if(nick == '')
  7.     {
  8.         $('#login').prepend('<div id=\'login_error\'>Nie podano loginu.</div>');
  9.     }
  10.     else if(pass == '')
  11.     {
  12.         $('#login').prepend('<div id=\'login_error\'>Nie podano hasła.</div>');
  13.     }
  14. 	else
  15. 	{
  16. 		var myLogAjax = new Ajax.Request
  17. 		(
  18. 		'check.php',
  19. 		{
  20. 			method: 'post',
  21. 			parameters: "nick="+nick+
  22. 			"&pass="+pass,
  23. 			onComplete: showResponseLog,
  24. 			onFailure: showAlertLog
  25. 		}
  26. 		);
  27. 	}
  28. }
  29. function showResponseLog(text)
  30. {
  31.  
  32. 	var logFrom = document.getElementById("logFrom");
  33.  
  34. 	if(text.responseText == '1')
  35. 	{
  36. 		$('#login').prepend('<div id=\'login_error\'>Konto nie istnieje, bądź zostało zalobkowane przez administratora.</div>');
  37. 	}
  38. 	else
  39. 	{        
  40. 		$('#login').prepend('<div id=\'login_ok\'>Zostałeś pomyślnie zalogowany jako: ' +text.responseText+ '</div>');
  41. 	}
  42. }
  43. function showAlertLog(MyRequest) 
  44. {
  45. 	$('#login').prepend('<div id=\'login_error\'>Wystąpił nieokreślony błąd podczas logowania. Skontaktuj się z administratorem.</div>');
  46. }
[PHP] pobierz, plaintext


Plik login.php

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. require 'header.php';
  4.  
  5. ?>
  6.  
  7. <script type=text/javascript src="function/js/login.js"></script>
  8. <script type=text/javascript src="function/js/prototype.js"></script>
  9.  
  10. <body id='ipboard_body' class='login_screen'>
  11. <div id='infoMassage'></div>
  12. <div id='logFrom'>
  13. <form action='java script:logowanie();'>
  14. <div id='login' class=''>
  15. 	<div id='login_controls'>
  16. 		<label for='nick'>Login</label>
  17. 		<input type='text' size='20' id='nick' name='nick' value='' class='textinput'>
  18.  
  19. 		<label for='pass'>Hasło</label>
  20. 		<input type='password' size='20' id='pass' name='pass' value='' class='textinput'>	</div>
  21. 	<div id='login_submit'>
  22. 		<input type='submit' class='button' value='Zaloguj' />
  23. 	</div>
  24.     </div>
  25. </form>	
  26. </div>
  27. </div>
  28. </body>
  29.  
  30. <?php
  31. /*
  32. }
  33. else
  34. {
  35.  
  36.  
  37. 	<body id='ipboard_body' class='login_screen'>
  38.     <form action='index.php' method='post'>
  39.     <div id='login' class=''>
  40. 	<div id='login_error'>Już jesteś zalogowany!</div>
  41. 		<div id='login_submit'>
  42. 			<input type='submit' class='button' value='Powrót' />
  43. 		</div>
  44.     </div>	
  45. 	</div>
  46. 	</body>
  47.  
  48. }*/
  49.  
  50. ?>
  51.  
  52. </html>
[PHP] pobierz, plaintext


Aha, jeszcze jedno, jak coś to poradnik tworzenia AJAX'owego logowania brałem z http://funkcje.net/nsc/2/1733/3/8/page.html

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.