با عرض سلام و ادب خدمت کاربران سایت پی وی لرن.
در این جلسه قصد داریم تا از Ajax در MySQL استفاده کنیم.
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 اجرا می شود.
کد برنامه:
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 | <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> |
توضیحات کد:
در ابتدا بررسی می کنیم که آیا فردی انتخاب شده است یا خیر.
اگر فردی انتخاب نشده بود ( str == “” )، محتوای txtHint را پاک کرده و از تابع خارج می شویم.
اگر فرد انتخاب شده بود کار های زیر را انجام می دهیم:
صفحه ای که توسط جاوااسکریپت در کد بالا فراخوانی می شود getuser.php نام دارد.
کد 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 50 51 52 53 | <!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> |
وقتی که درخواست از جاوااسکریپت به فایل php ارسال می شود، کار زیر انجام می شوند:
جلسه کار با Ajax در MySQL نیز به پایان رسید.
در جلسه بعد به آموزش کار با Ajax در XML خواهیم پرداخت. با ما همراه باشید.