توی دوره رایگان PHP، هر چیزی که برای حرفه‌ای شدن نیاز داری رو یاد می‌گیری! از مفاهیم پایه تا پیشرفته، همراه با یه پروژه واقعی برای ساخت یه سایت مثل آپارات.
مشاهده بیشتر
توی این دوره با هم یه وبسایت خبری واقعی رو از صفر می‌سازیم! از طراحی دیتابیس و احراز هویت تا ساخت API و یه پنل مدیریت حرفه‌ای، همه رو یاد می‌گیریم و آماده پروژه‌های واقعی میشی!
مشاهده بیشترمشخصات مقاله
-
3052
-
0.0
-
11457
-
0
-
0
آموزش PHP – واکشی داده ها از دیتابیس MySQL با AJAX
واکشی اطلاعات از دیتابیس با فراخوانی توابع AJAX
مثال ذیل نشان می دهد چگونه یک صفحه ی وب (از اپلیکیشن تحت وب) می تواند با فراخوانی توابع AJAX، داده از دیتابیس واکشی کند:
در این مثال کاربر اسم شخص مورد نظر را از لیست کشویی انتخاب کرده و اطلاعات مربوطه ی آن را بدون اینکه کل صفحه بروز رسانی شود، از دیتابیس می خواند و در زیر نمایش می دهد:
شرح مثال – دیتابیس MySQL
جدول دیتابیسی که اطلاعات مثال فوق از آن واکشی شده و به نمایش در می آید، مشابه زیر می باشد:
در مثال فوق، زمانی که یک کاربر شخص مورد نظر را از لیست کشویی (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-->FirstnameLastnameAgeHometownJob";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 ارسال می شود، اتفاقات زیر به ترتیب رخ می دهد:
- PHP یک connection به سرور MySQL ایجاد می کند.
- شخص مورد نظر و اطلاعات مربوطه ی آن یافت می شود.
- یک جدول HTML ایجاد شده با داده های مورد نیاز پر می شود و متعاقبا به پارامتر مکان نگهدار (placeholder) "txtHint" ارسال می گردد.