javascript - How make a login system using ajax without refreshing the page -
i want make login system without refreshing page using button, ajax dont know how it.
my problem code wont work if click button. how use ajax communicate myincludes.php if press button login?
index.php
<html lang="en"> <head> <script type="text/javascript"> $('#login').click(function(){ <?php include_once('myincludes.php'); ?> }); </script> </head> <body> <form method="post"> username: <input type="text" name="user" /><br /> password: <input type="text" name="pass" /><br /> <button type="button" name="login" id="login">login</button> </form> </body> </html> myincludes.php
<?php session_start(); include_once('connection.php'); include_once('user.php'); if(isset($_post['submit'])){ $user = $_post['user']; $pass = $_post['pass']; $object = new user(); $object->login($user, $pass); } ?> user.php
<?php include_once('connection.php'); class user{ private $db; public function __construct(){ $this->db = new connection(); $this->db = $this->db->dbconnect(); } public function login($user, $pass){ if(!empty($user) && !empty($pass)){ $st = $this->db->prepare("select * users username=? , password=?"); $st->bindparam(1, $user); $st->bindparam(2, $pass); $st->execute(); if($st->rowcount() == 1){ echo "user verifies, access granted"; } else { echo "incorrect username or password"; } }else{ echo "please enter username , password"; } } } ?> connection.php
<?php class connection{ public function dbconnect(){ return new pdo('mysql:host=localhost; dbname=test', 'root', ''); } } ?>
i building system this, know how must understand ajax. first of need html page filled header, empty body need empty divs in body.
<?php //start objects , sessions if required //i set data , add data session. //so available entire application. in object oriented way. ?> <html> <head> //fill in header data imports etc. <script src="your javascript file" type="text/javascript"></script> <script src ="jquery"/></script>//i dont use myself can useful </head> <body> <div id="content"></div> <div id ="hidden" style="visibility:hidden></div> //for hidden js feedback. <script type="text/javascript"> loadlogin(); </script> </body> </html> then javascript (without jquery)
url = "urltoyourbackendphp"; //type type of function called php. //div div changed. //vars array post variables. function ajaxcall(type, div, vars){ var xml = new xmlhttprequest(); //doesnt work on ie 7 or lower xml.onreadystatechange=function(){ if (xml.readystate==4 && xml.status==200){ document.getelementbyid(div).innerhtml=xml.responsetext; } }; xml.open("post",url,true); //url php xml.setrequestheader("content-type","application/x-www-form-urlencoded"); var nvar = "type="+type; var = 1; foreach(vars vara){ nvar = nvar+"&var"+i+"="+vara; } xml.send(nvar); } function login(){ var name = document.getelementbyid("name"); var pass = document.getelementbyid("pass"); name = name.value; pass = pass.value; ajax(login, hidden, array(name, pass)); } function loadlogin(){ ajax("loadpage", "content", array("login")); } function loadhome(){ ajax("loadpage", "content" array("home"); } function alertlogin(){ alert("username or pass wrong"); } and php backend
<?php $type = $_post["type"]; if($type == "loadpage"){ $pagename = $_post["var1"]; if($pagename == "login"){ fread("loginpage.php"); //echoes contents of file }elseif($pagename == "home"){ fread("home.php"); } elseif($type == "login"){ $name = $_post["var1"]; $pass = $_post["var2"]; //do checks on these. make sure prevent sql-injections too. if(checks){ echo "<style onload='loadhome()'></style>"; }else{ echo "<style onload='alertlogin()'></style>"; //this 1 of few ways make php javascript call. //via echo , think might efficient. } }?> now there might few syntax errors since out of head without compiler check me, system use , works fine plus can dynamic. if want bigger application must keep in mind sorts of things preventing sql-injection , sessions etc.
the important thing know did base of on w3schools tutorials ajax.
Comments
Post a Comment