Idemo malo sada se pozabaviti s bazom podataka (mysql). Uglavnom je princip isti, samo sto cemo sada slati varijable u PHP (ovaj put necu objasnjavati stvari koje su vec objasnjene). Napraviti cemo jednu formu i provjeravati je li vec iskoristen username i je li email validan (korisno za registraciju korisnika):
HTML stranica (index.html):
Code:
<html>
<head>
<title>Ajax tutorijal</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form action="registracija.php" method="POST">
Username: <input type="text" id="user" name="user" onKeyUp="provjera(this.value, 'user');" /><span id="provjerauser"></span>
<br />E-mail: <input type="text" id="email" name="email" onKeyUp="provjera(this.value, 'email');" /><span id="provjeraemail"></span>
</form>
</body>
</html>
Code:
<input type="text" id="user" name="user" onKeyUp="provjera(this.value, 'user');" />
-s
onKeyUp pozivamo funkciju
provjera() svaki put kada se upise neko slovo ili broj (opcenito nesto za pisanje). Saljemo varijable u kojima je tekst polja i u drugoj je samo "user". Isto ovo vrijedi i za provjeru e-maila.
Code:
<span id="provjerauser">
-ovdje ce biti ispisan rezultat. Isto ovo vrijedi i za provjeru e-maila.
JavaScript stranica (ajax.js):
Code:
var xmlhttp;
function provjera(x, y)
{
xmlhttp=objekt();
if (xmlhttp==null)
{
alert ("Browser vam ne podrzava ajax (http request).");
return;
}
var url="provjera.php?x="+ x +"&y="+ y +"&sid="+ Math.random();
xmlhttp.onreadystatechange=promjena;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
koji = y;
}
function promjena()
{
if (xmlhttp.readyState==4)
{
document.getElementById("provjera" + koji).innerHTML=xmlhttp.responseText;
}
}
function objekt()
{
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
Code:
function provjera(x, y)
-'opisujemo' funkciju
provjera() u kojoj prilikom pozivanja moraju biti upisani
x i
y (to su varijable)
Code:
var url="provjera.php?x="+ x +"&y="+ y +"&sid="+ Math.random();
-opcenito, kada saljemo varijable
GET metodom one su vidljive u url-u. Upravo to i radimo ovdje.
-upisujemo u varijablu
koji vrijednost varijable
y
Code:
document.getElementById("provjera" + koji).innerHTML=xmlhttp.responseText;
-kada je zahtjev gotov upisujemo ga u DIV
provjerauser ili
provjeraemail
PHP stranica (baza.php):
Code:
<?php
$con = mysql_connect("server","user","lozinka");
if (!$con)
{
die(mysql_error());
}
?>
-konfiguracije za mysql
PHP stranica (provjera.php):
Code:
<?php
$tekst = $_GET["x"];
$y = $_GET["y"];
if ($y == "user")
{
require ("baza.php");
mysql_select_db("igre", $con);
$rezultat = mysql_query("SELECT * FROM user WHERE nick='$tekst'");
$provjera = 1;
while($mysql = mysql_fetch_array($rezultat))
{
$provjera++;
}
if ($provjera == 1)
{
echo "-nije zauzeto";
}
else
{
echo "-username je zauzet";
}
mysql_close($con);
}
elseif ($y == "email")
{
if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $tekst))
{
echo "-uneseni email nije ispravan";
}
else
{
echo "-uneseni email je ispravan";
}
}
?>
Code:
$tekst = $_GET["x"];
$y = $_GET["y"];
-ucitavamo
x i
y varijable koje su poslane
GET metodom i upisujemo ih u
$tekst i
$y
-ako je poslana varijabla
y u kojoj je "user" onda vrsimo sljedeci kod
Code:
require ("baza.php");
mysql_select_db("baza", $con);
$rezultat = mysql_query("SELECT * FROM user WHERE nick='$tekst'");
$provjera = 1;
while($mysql = mysql_fetch_array($rezultat))
{
$provjera++;
}
if ($provjera == 1)
{
echo "-nije zauzeto";
}
else
{
echo "-username je zauzet";
}
mysql_close($con);
-cista logika. Nije potrebno previse objasnjavati jer je ovo ipak ajax tutorijal
Code:
elseif ($y == "email")
-ako je poslana varijabla
y u kojoj je "email" onda vrsimo sljedeci kod
Code:
if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $tekst))
{
echo "-uneseni email nije ispravan";
}
else
{
echo "-uneseni email je ispravan";
}
-provjera je li email u dopustenom obliku (ovo sam preuzeo od negdje)
Evo opet kazem da ako imate pitanja pitate ovdje ili posaljete pp. Takodjer, evo zippano sve skupa:
ajax.rar (Size: 1.31 KB / Downloads: 5)
Search
Member List
Calendar
Help
