یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی
🎯 ثبت نام
بستن تبلیغات
دوره آموزش جامع PHP از صفر تا صد با پروژه‌های عملی

توی دوره رایگان PHP، هر چیزی که برای حرفه‌ای شدن نیاز داری رو یاد می‌گیری! از مفاهیم پایه تا پیشرفته، همراه با یه پروژه واقعی برای ساخت یه سایت مثل آپارات.

مشاهده بیشتر
دوره پروژه‌محور لاراول: ساخت وبسایت خبری از صفر تا صد

توی این دوره با هم یه وبسایت خبری واقعی رو از صفر می‌سازیم! از طراحی دیتابیس و احراز هویت تا ساخت API و یه پنل مدیریت حرفه‌ای، همه رو یاد می‌گیریم و آماده پروژه‌های واقعی میشی!

مشاهده بیشتر

آموزش PHP – واکشی داده ها از دیتابیس MySQL با AJAX

واکشی اطلاعات از دیتابیس با فراخوانی توابع AJAX

مثال ذیل نشان می دهد چگونه یک صفحه ی وب (از اپلیکیشن تحت وب) می تواند با فراخوانی توابع AJAX، داده از دیتابیس واکشی کند:

در این مثال کاربر اسم شخص مورد نظر را از لیست کشویی انتخاب کرده و اطلاعات مربوطه ی آن را بدون اینکه کل صفحه بروز رسانی شود، از دیتابیس می خواند و در زیر نمایش می دهد:

واکشی اطلاعات از دیتا بیس 01 واکشی اطلاعات از دیتا بیس 02 واکشی اطلاعات از دیتا بیس 03 واکشی اطلاعات از دیتا بیس 04

شرح مثال – دیتابیس MySQL

جدول دیتابیسی که اطلاعات مثال فوق از آن واکشی شده و به نمایش در می آید، مشابه زیر می باشد:

id
FirstName
LastName
Age
Hometown
Job
1
Peter
Griffin
41
Quahog
Brewery
2
Lois
Griffin
40
Newport
Piano Teacher
3
Joseph
Swanson
39
Quahog
Police Officer
4
Glenn
Quagmire
41
Quahog
Pilot
شرح مثال

در مثال فوق، زمانی که یک کاربر شخص مورد نظر را از لیست کشویی (drop-down list) انتخاب می کند، در واقع یک تابع به نام "showUser()" فراخوانی می شود.

این تابع را رخداد onchange فراخوانی می کند.

کد HTML مربوطه را در زیر مشاهده می کنید.

مثال:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>
 
 
<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>
 
 
<button></button>

شرح کد:

ابتدا می بایست شخص مورد نظر را انتخاب نمایید. چنانچه شخصی انتخاب نشده باشد (str == "")، در آن صورت محتوای txtHint را حذف و از تابع خارج می شود. اگر شخص دلخواه انتخاب شده باشد، آنگاه اقدامات زیر صورت می گیرد:

  • یک آبجکت XMLHttpRequest ایجاد می شود.
  • یک تابع تعریف می شود که به هنگام آماده شدن پاسخ سرویس دهنده (server response)، فراخوانی شده و اجرا می شود.
  • درخواست (request) را به فایل مستقر بر روی سرویس دهنده هدایت می شود.
  • یک پارامتر (q) به URL (به همراه محتوای لیست کشویی) اضافه می شود.

فایل PHP

صفحه ای از اپلیکیشن تحت وب مستقر در سرویس دهنده که کد JavaScript بالا آن را فراخوانی می کند، در واقع یک فایل PHP به نام "getuser.php" می باشد.

کد موجود در فایل "getuser.php" یک کوئری از دیتابیس MySQL می گیرد و نتیجه را در قالب یک جدول HTML برمی گرداند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
 
    table, td, th {
        border: 1px solid black;
        padding: 5px;
    }
 
    th {
        text-align: left;
    }
</style>
 
 
<!--?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-->
 
Firstname
Lastname
Age
Hometown
Job
";
while($row = mysqli_fetch_array($result)) {
    echo "";
    echo "" . $row['FirstName'] . "";
    echo "" . $row['LastName'] . "";
    echo "" . $row['Age'] . "";
    echo "" . $row['Hometown'] . "";
    echo "" . $row['Job'] . "";
    echo "";
}
echo "";
mysqli_close($con);
?>
 
 
<button></button>

شرح: زمانی که کوئری و دستور درخواست داده از JavaScript به فایل PHP ارسال می شود، اتفاقات زیر به ترتیب رخ می دهد:

  1. PHP یک connection به سرور MySQL ایجاد می کند.
  2. شخص مورد نظر و اطلاعات مربوطه ی آن یافت می شود.
  3. یک جدول HTML ایجاد شده با داده های مورد نیاز پر می شود و متعاقبا به پارامتر مکان نگهدار (placeholder) "txtHint" ارسال می گردد.
1396/02/19 11462 3052
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...