Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][JavaScript] Wysłanie formularza bez przeładowania strony
-kubek3898-
post 28.01.2013, 17:25:18
Post #1





Goście
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.
Go to the top of the page
+Quote Post
nospor
post 28.01.2013, 17:40:58
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
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ąć.


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
-kubek3898-
post 30.01.2013, 17:56:48
Post #3





Goście
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
Go to the top of the page
+Quote Post
ethann
post 30.01.2013, 18:16:45
Post #4





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

Ostrzeżenie: (0%)
-----

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.

Ten post edytował ethann 30.01.2013, 18:20:52
Go to the top of the page
+Quote Post
-kubek3898-
post 30.01.2013, 18:24:53
Post #5





Goście
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.

Ten post edytował kubek3898 30.01.2013, 18:27:01
Go to the top of the page
+Quote Post
ethann
post 30.01.2013, 18:32:31
Post #6





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
-kubek3898-
post 30.01.2013, 18:41:52
Post #7





Goście
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.
Go to the top of the page
+Quote Post
ethann
post 30.01.2013, 18:48:52
Post #8





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
-kubek3898-
post 2.02.2013, 17:29:10
Post #9





Goście
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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 28.05.2025 - 09:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn