Jump to content
php.lv forumi

ajax log in forma!


thesnarkie

Recommended Posts

index.html

<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="login.js" type="text/javascript"></script>
</head>
<body>
<form name="ajax" action="" method="post">
             <ul>
               <li>
                 <label for="username">Username: </label>
                 <input type="text" name="username" class="field" id="username" />
               </li>
               <li>
                 <label for="password">Password: </label>
                 <input type="password" name="password" class="field" id="password" onKeyPress="return capsLock(event)" />
                 <div id="caps_lock" style="display:none; color:red; font-weight:bold">Caps Lock taustiņš ir ieslēgts.<br />Pārliecinies, ka raksti paroli pareizi!</div>
                 <div id="error" style="display:none; color:red; font-weight:bold">Hujovā kļūda!</div>
               </li>
               <li>
                 <center>
                   <input name="login" type="button" value="Submit" onclick="sumbitLoginData()" />
                 </center>
               </li>
             </ul>
           </form>
</body></html>

 

ajax.js

function createXHR() 
{
   var request = false;
       try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
       catch (e) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); }
       catch (e) { try { request = new XMLHttpRequest(); }
	catch (e) { request = false; }}}
   return request;
}

login.php

<?PHP

   $usernamedb="***";
   $database="***"; 
   $passworddb="***"; 
   $hostname="***";
   $db = mysql_connect($hostname,$usernamedb,$passworddb); 
   mysql_select_db($database,$db);

if($_GET['action']=="login") {
  $posted = &$_POST;
  $p_username = $posted["username"];
  $p_password = $posted["password"];

  $sql = mysql_query("SELECT `id` FROM `accounts` WHERE `username`='$p_username' AND `password`='$p_password'",$db);
  $result = mysql_num_rows($sql);

  if($result!=1) { 
	echo "error";
  }
  else {
	echo "success";
  }
}
?>

login.js

	function sumbitLoginData()
{
  var username = document.ajax.username.value;
  var password = document.ajax.password.value;
  var p_data = "&username=" + username + "&password=" + password;
  var p_url = "login.php?action=login";
  doPost(p_url, p_data);
}

function doGet()
{
  var g_method = "GET";
  var g_url = "login.php?";
  var g_data = null;
  doReg(g_url, g_data, g_method);
}
function doPost(url, data)
{
  var p_method = "POST";
  doReg(url, data, p_method);
   }

function doReg(url, data, method)
{
  var xhr = createXHR();

  xhr.open(method, url, true);
  if(method == "POST") {
	  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  }
  xhr.send(data);

  xhr.onreadystatechange = function()
   {
	  var resp = null;
	  if (xhr.readyState == 4) {

	  var status = xhr.status;
	  var statusText = xhr.statusText;
	  var responseText = xhr.responseText;
	  var responseXML = xhr.responseXML;

		switch(xhr.responseFormat) {
		case 'text':
		  resp = responseText;
		  break;
		case 'xml':
		  resp = responseXML;
		  break;
		case 'object':
		  resp = req;
		  break;
		}
		if (status > 199 && status < 300) {
		  if (!handleResp) {
			alert('No response handler defined ' +
			  'for this XMLHttpRequest object.');
			return;
		  }
		  else {
			document.getElementById('error').style.display = 'block';
		  }
		}
		else {
		  document.getElementById('error').style.display = 'block';
		}
	  }
   }
}

 function capsLock(e){
 keycode = e.keyCode?e.keyCode:e.which;
 shift = e.shiftKey?e.shiftKey:((keycode == 16)?true:false);
 if(((keycode >= 65 && keycode <= 90) && !shift)||((keycode >= 97 && keycode <= 122) && shift))
  document.getElementById('caps_lock').style.display = 'block';
 else
  document.getElementById('caps_lock').style.display = 'none';
}

 

Nezinu kāpēc un kā to izdarīt, ka viņš parāda to error ziņu (document.getElementById('error').style.display = 'block';), ja tāda lietotāja nav. Mēģināju šur tur ielikt, bet nesanāca. It kā ar Firebugu parādīja, ka response ir error, bet tik tiešām nezinu kā tālāk, lai parādītu to erroru.

Idejas?

Link to comment
Share on other sites

Man tagad ir slinkums caurskatīt to kodu, bet cik nu uzmetu aci.

 

1) XMLHttpRequest objektam ir parametrs responseText, kurš saturēs visu to, ko izvadīs serveris (tavā gadījumā login.php). Cik skatos tev tas glabājas mainīgajā resp. Tā kā vari apskatīties ko tas satur.

 

2) Kāda jēga tev ir izmantot AJAX login'u? Tikai tapēc, ka tas ir stilīgi? Manuprāt, nav daudz gadījumu, kad to vajadzētu darīt.

 

3) Tev nekas nenotiek arī tad ja php kods atgriež visu OK. Tu tak nemaz neskaties ko viņš vispār atgriež. Un cik es skatos, tev viņš vienmēr parādīs #error. Pārskati kodu un izdomā ko tu vispār gribi.

 

4) Jocīga XMLHttpRequest objekta inicializācija. Sākt, manuprāt vajadzētu ar new XMLHttpRequest(), jo tas ir visticamākais inicializēšanas variants. Tev viņš ir atstāts kā pēdējais.

 

Vārdu sakot tas viss ir paliels FAIL.

 

Ja jau izmanto AJAX pie ielogošanās, tad normāli būtu, ja tu to izmantotu arī citur - balstoties uz to iesaku apskatīt jQuery, kas atvieglos AJAX būšanas. Ja citur AJAX neizmanto, tad viņu nevajag tev izmantot arī te.

Edited by rATRIJS
Link to comment
Share on other sites

<form name="login_form" id="login_form" method="post">
             <ul>
               <li>
                 <label for="username">Username: </label>
                 <input type="text" name="username" class="field" id="username" />
               </li>
               <li>
                 <label for="password">Password: </label>
                 <input type="password" name="password" class="field" id="password" />
               </li>
               <li>
                 <center>
                   <a href="#" class="btn" onclick="this.form.submit()"><span><span>Register here!</span></span></a>
                 <div id="error" style="color:red; font-weight:bold"></div>
                 </center>
               </li>
             </ul>
           </form>

 

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#login_form").submit(function() {
		var unameval = $("#username").val();
		var pwordval = $("#password").val();
		$.post("login.php", { username: unameval, 
		password: pwordval }, function(data) {
			$("#error").html(data);
		});
		return false;
	});
});
</script>

 

Kas js ir nepareizi, ka viņš neko nedara?

Un, kā pareizi te rakstīt:

		$("#login_form").submit(function() {
		var unameval = $("#username").val();
		var pwordval = $("#password").val();
		$.post("login.php", { username: unameval, 
		password: pwordval }, function(data) {
			var gdata = html(data);												  
			if(gdata == 1) {
				location.reload();
			}
		});
		return false;
	});

Ideja bija, ka tad, kad atbildē saņem 1, tad pārlādē lapu.

Edited by thesnarkie
Link to comment
Share on other sites

To visu var nedaudz saīsināt:



$(document).ready(function() {
 $("#login_form").submit(function() {
   $.post("login.php", $(this).serialize(), function(data, status) {
     $("#error").html(data);
   });
   return false;
 });
});

 

un kā redzi callback f-jai var padot otro parametru status, kurš saturēs vērtību success, ja visā procesā nebūs notikušas kļūdas (aka saņems atblidi no servera). Es gan nēesmu drošs, ka veicot šo pieprasījuma tipu ($.post) status varēs saturēt kaut kādu error tipa statusu, bet tik un tā tam vajadzētu dot kaut kādu priekšstatu.

 

+ piedevām $.post atgriež XMLHttpRequest objektu, ar kuru vari ņemties pats manuāli (skatīties statusu kaut vai).

xhr = $.post(...);

 

+ piedevām - kādēļ tu visu bāz iekš #error?

 

UPDATE:

 

Ja gribi pēc veiksmīga login pārlādēt lapu, tad kāda mārutka pēc tu vispār gribi lietot AJAX?

$.post("login.php", $(this).serialize(), function(data) {
 if(data == "1") {
   location.reload();
 }
 else {
   alert("You FAILED");
 )
});

Edited by rATRIJS
Link to comment
Share on other sites

Es domāju, ka tu paskaidrosi, bet tu tieši otrādi..

script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".error").hide();
	  $("#login_form").submit(function() {
		var unameval = $("input#username").val();
		  if (unameval == "") {
		  $("label#no_username").show();
		  $("input#username").focus();
		  return false;
		}
		  var pwordval = $("input#password").val();
		  if (pwordval == "") {
		  $("label#no_password").show();
		  $("input#password").focus();
		  return false;
		}
		  if (unameval == "" && pwordval == "") {
		  $("label#no_username").show();
		  $("label#no_password").show();
		  $("input#username").focus();
		  return false;
		}							   						   
		$.post("login.php", $(this).serialize(), function(data, status) {
		  $("#error").html(data);
		});
		return false;
	  });
});
function capsLock(e){
 keycode = e.keyCode?e.keyCode:e.which;
 shift = e.shiftKey?e.shiftKey:((keycode == 16)?true:false);
 if(((keycode >= 65 && keycode <= 90) && !shift)||((keycode >= 97 && keycode <= 122) && shift))
  document.getElementById('caps_lock').style.display = 'block';
 else
  document.getElementById('caps_lock').style.display = 'none';
}
</script>

<form name="login_form" id="login_form" method="post">
             <ul>
               <li>
                 <label for="username">Username: </label>
                 <input type="text" name="username" class="field" id="username" />
                 <label class="error" for="username" id="no_userame">Write your username!</label>
               </li>
               <li>
                 <label for="password">Password: </label>
                 <input type="password" name="password" class="field" id="password" onKeyPress="return capsLock(event)" />
                 <label class="error" for="password" id="no_password">Write your password!</label>
               </li>
               <li>
                 <center>
                   <input type="submit" class="hiddensubmit" style="display:none;"/>
                   <a href="#" class="btn" onclick="this.form.submit()"><span><span>Register here!</span></span></a>
                   <div id="caps_lock" style="display:none; color:red; font-weight:bold">Caps Lock taustiņš ir ieslēgts.<br />
                     Pārliecinies, ka raksti paroli pareizi!</div>
                   <div id="error" style="color:red; font-weight:bold"></div>
                 </center>
               </li>
             </ul>
           </form>

login.php

$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);

  $sql = mysql_query("SELECT `id` FROM `accounts` WHERE `username`='$username' AND `password`='$password'",$db);
  $result = mysql_num_rows($sql);

  if($result!=1) { 
	print "Username or/and password is wrong.";
  }
  else {
	print "1";
  }

1. viņš nesubmito pareizi formu ar to link pogu.. Kāpēc, kas nepareizi? firebugā raksta this.form is undefined.

2. if (unameval == "" && pwordval == "") - kas te ir nepareizi? kad es sūtu (pirms tam, kad bija parasta submit poga) formu un atstāju abus laukus tukšus, nekas nerādas. bet, ja viens vai otrs ir tukšs, tad rādās attiecīgā ziņa.

3. + piedevām - kādēļ tu visu bāz iekš #error? kpc gan ne?

4. labi, pārlādēt visu lapu būtu negudri. bet ar to noņemšos vēlāk. sākumā jāpabeidz šitā čerņa.

Edited by thesnarkie
Link to comment
Share on other sites

1)

this attiecas un konkrēto elementu - protams, ka viņam nebūs atribūts form. Vari piešķirt a kādu id atribūtu un tad darīt tā (pieņemu, ka id = register):

$("#register").click(function() {
 $("#login_form").submit();
});

 

Bet kādēļ jāizmanto ir a, ja ir submit poga?

 

2) tavs if nekad neizpildīses, ja rakstīts būs tā kā tavā kodā. Tev tā ir jāliek kā pirmā pārbaude un tikai pēctam jāpārbauda katrs atsevišķi.

 

3) tapēc, ka tas nav loģiski. #error ir jāsatur kļūdas vērtība nevis to ko atgriež serveris. (ja tagad reload'osi lapu, tad viss ir OK, jo tur rakstīsi tikai error'us)

Link to comment
Share on other sites

ok, paldies. tiku galā.

tagad man ir cita problēma.

 

uzmetiet aci šim te.

1. uzspiediet uz kādas no tām sign up pogām. tas ielādēs reģistrēšanās contentu.

2. salieciet uz haļavu kaut kādus datus iekšā un nospiediet sign up.

 

viņš ielādē atkal sākumalapu.

kā lai notur viņu tur kur viņam jābūt līdz brīdim, kamēr es kodā neprasu iet kaut kur?

 

vai ir arī kāds cits veids kā panākt to, ko cenšos es?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...