» Ajax ile Temel Veritabanı Erişimi

Ajax ile Temel Veritabanı Erişimi

15 Haz 2007 | Yazar fmo | Kategori Ajax

Örneğimiz member tablomuzda bulunan memberCity alanı ile uğraşacak. Amacımız üyelerimiz arasından bizim çoktan seçmeli form öğemizde belirteceğimiz şehirden olanların sayısını getimek.

Bu işi yapmak için 2 php 1 de js dosyasına ihtiyacağımız olacak;

1 – cityCount.js

function cityCount(){
var url = "getCityCount.php?city=" +
document.cityForm.city.value;
document.getElementById('countPlace').innerHTML =
"...veritabanına bağlanıyor...";
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse(){
if(http.readyState == 4) {
results = http.responseText;
document.getElementById('countPlace').innerHTML = results;
}
}function getHTTPObject(){
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E){
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if(!xmlhttp && typeof XMLHttpRequest != "undefined"){
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();

2 – getCityCount.php

<?
include "config.inc.php";
$conn = new connect();
$conn -> mycon();
$SQL = mysql_query("SELECT * FROM members WHERE
city = '".$city."'");
echo @mysql_num_rows($SQL);
?>

3 – cityCount.php

<html>
<head>
<meta http-equiv="Content Type" content="text/html;
charset=ISO-8859-9">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
<script type="text/javascript"
src="cityCount.js"></script>
</head>
<body>
<form name="cityForm">
<select onchange="cityCount()" name="city">
<option value="0">Şehir Seçiniz</option>
<option value="istanbul">İstanbul</option>
<option value="İzmir">İzmir</option>
<option value="Ankara">Ankara</option>
<option value="adana">Adana</option>
</select>
</form>
<div name="countPlace" id="countPlace">#</div>
</body>
</html>

Yukarıdaki örneğin çalışır haline buradan ulaşabilirsiniz…

Etiketler:
Yorum yok.