ajax log in forma!

thesnarkie · November 22, 2009

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?

rATRIJS · November 22, 2009

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 November 22, 2009 by rATRIJS

briedis · November 22, 2009

+rATRIJAS, un vēl kvērijā liekam nevalidētus datus...

codez · November 22, 2009

viss kas tev vajadzīgs no js:

$.post('login.php',{username:$('#username').val(),password:$('#password').val()},function(r){
 if(r=='ok'){
   document.location='/home';
 } else {
   $('#error').show();    
 }
},'text');

thesnarkie · November 22, 2009

<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 November 22, 2009 by thesnarkie

rATRIJS · November 22, 2009

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 November 22, 2009 by rATRIJS

thesnarkie · November 22, 2009

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 November 22, 2009 by thesnarkie

rATRIJS · November 22, 2009

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)

thesnarkie · November 23, 2009

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?

Sign In

ajax log in forma!

Recommended Posts

thesnarkie

Link to comment

Share on other sites

rATRIJS

Link to comment

Share on other sites

briedis

Link to comment

Share on other sites

codez

Link to comment

Share on other sites

thesnarkie

Link to comment

Share on other sites

rATRIJS

Link to comment

Share on other sites

thesnarkie

Link to comment

Share on other sites

rATRIJS

Link to comment

Share on other sites

thesnarkie

Link to comment

Share on other sites

Join the conversation

Browse

Activity