۳
آذر

جلسه ۴۵ : کار با Ajax در MySQL

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و ادب خدمت کاربران سایت پی وی لرن.
در این جلسه قصد داریم تا از Ajax در MySQL استفاده کنیم.

Ajax می تواند برای ارتباط تعاملی با پایگاه داده مورد استفاده قرار بگیرد.

استفاده از Ajax در پایگاه داده

در ادامه برنامه ایی خواهیم نوشت که نشان می دهد چطور می توانیم اطلاعات را از پایگاه داده توسط Ajax بگیریم.:

استفاده از Ajax در پایگاه داده

جدول پایگاه داده ای که ما از آن در برنامه استفاده میکنیم به شکل زیر است:

Job	Hometown	Age	LastName	FirstName	id
Brewery	Quahog	۴۱	Griffin	Peter	۱
Piano Teacher	Newport	۴۰	Griffin	Lois	۲
Police Officer	Quahog	۳۹	Swanson	Joseph	۳
Pilot	Quahog	۴۱	Quagmire	Glenn	۴

توضیحات برنامه:

در برنامه بالا هنگامی که کاربر یک نفر را از لیست انتخاب کرد، تابع ()showser اجرا می شود.

تابع توسط رویداد onchange اجرا می شود.

کد برنامه:

مثال :

 <html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

<html>

<head>

function showUser(str) {

if (str == "") {

document.getElementById("txtHint").innerHTML = "";

return;

} else {

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {

// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText;

}

};

xmlhttp.open("GET","getuser.php?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form>

<option value="">Select a person:</option>

<option value="1">Peter Griffin</option>

<option value="2">Lois Griffin</option>

<option value="3">Joseph Swanson</option>

<option value="4">Glenn Quagmire</option>

</select>

</form>

<br>

<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>

</html>

توضیحات کد:

در ابتدا بررسی می کنیم که آیا فردی انتخاب شده است یا خیر.

اگر فردی انتخاب نشده بود ( str == “” )، محتوای txtHint را پاک کرده و از تابع خارج می شویم.

اگر فرد انتخاب شده بود کار های زیر را انجام می دهیم:

یک XMLHttpRequest object ایجاد می کنیم
وقتی server responce اماده بود تابع را اجرا می کنیم
یک درخواست به فایل php ارسال می کنیم
توجه داشته باشید که پارامتر q به url اضافه شده است

فایل PHP

صفحه ای که توسط جاوااسکریپت در کد بالا فراخوانی می شود getuser.php نام دارد.

کد php یک کوئری پایگاه داده MySQL را اجرا می کند و نتایج را در یک جدول HTML چاپ می کند:

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['FirstName'] . "</td>";
    echo "<td>" . $row['LastName'] . "</td>";
    echo "<td>" . $row['Age'] . "</td>";
    echo "<td>" . $row['Hometown'] . "</td>";
    echo "<td>" . $row['Job'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

table {

width: 100%;

border-collapse: collapse;

}

table, td, th {

border: 1px solid black;

padding: 5px;

}

th {text-align: left;}

</style>

</head>

<body>

<?php

$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc123','my_db');

if (!$con) {

die('Could not connect: ' . mysqli_error($con));

}

mysqli_select_db($con,"ajax_demo");

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Hometown</th>

</tr>";

while($row = mysqli_fetch_array($result)) {

echo "<tr>";

echo "<td>" . $row['FirstName'] . "</td>";

echo "<td>" . $row['LastName'] . "</td>";

echo "<td>" . $row['Age'] . "</td>";

echo "<td>" . $row['Hometown'] . "</td>";

echo "<td>" . $row['Job'] . "</td>";

echo "</tr>";

}

echo "</table>";

mysqli_close($con);

</body>

</html>

وقتی که درخواست از جاوااسکریپت به فایل php ارسال می شود، کار زیر انجام می شوند:

php با سرور MySQL ارتباط برقرار می کند
فرد مورد نظر را پیدا می کند
یک جدول html ایجاد می کند. داده ها را در آن قرار می دهد و نتایج را در txtHint نمایش می دهد

جلسه کار با Ajax در MySQL نیز به پایان رسید.
در جلسه بعد به آموزش کار با Ajax در XML خواهیم پرداخت. با ما همراه باشید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۵ : کار با Ajax در MySQL

استفاده از Ajax در پایگاه داده

توضیحات برنامه:

فایل PHP

لیست مطالب دوره

مقدمات آموزش PHP

PHP Forms

MySQL Database

PHP - XML

PHP - AJAX

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ