یکی از استفاده های رایج JSON، خواندن اطلاعات از سمت سرور و نمایش آن در صفحات وب است. در این مقاله به شما توضیح خواهیم داد که چطور داده های JSON را بین سرور و کلاینت انتقال دهید.
خوشبختانه PHP درون خود توابع و دستوراتی دارد که می تواند با JSON کار کند بنابراین نیازی به کد خارجی نداریم. اشیاء PHP می توانند با استفاده از تابع ()json_encode
تبدیل به JSON شوند:
<?php $myObj->name = "John"; $myObj->age = 30; $myObj->city = "New York"; $myJSON = json_encode($myObj); echo $myJSON; ?>
خروجی کد بالا رشته ی JSON زیر خواهد بود:
{"name":"John","age":30,"city":"New York"}
حالا می توانیم با استفاده از جاوا اسکریپت و یک دستور AJAX، فایل PHP بالا را از سرور دریافت کنیم:
<!DOCTYPE html> <html> <body> <h2>Get data as JSON from a PHP file on the server.</h2> <p id="demo"></p> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "demo_file.php", true); xmlhttp.send(); </script> </body> </html>
خروجی این کد عبارت "John" خواهد بود.
جدا از اشیاء، آرایه های PHP نیز می توانند با استفاده از تابع ()json_encode
به صورت رشته ی JSON در بیایند:
<?php $myArr = array("John", "Mary", "Peter", "Sally"); $myJSON = json_encode($myArr); echo $myJSON; ?>
خروجی این دستور، رشته ی زیر می باشد:
["John","Mary","Peter","Sally"]
حالا می توانیم با یک درخواست دیگر AJAX فایل PHP بالا را از سرور بگیریم:
<!DOCTYPE html> <html> <body> <h2>Get data as JSON from a PHP file, and convert it into a JavaScript array.</h2> <p id="demo"></p> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj[2]; } }; xmlhttp.open("GET", "demo_file_array.php", true); xmlhttp.send(); </script> </body> </html>
خروجی این درخواست AJAX عبارت "Peter" خواهد بود.
همانطور که میدانید زبان PHP یک زبان برنامه نویسی سمت سرور است و برای عملیات هایی استفاده می شود که مخصوص سرور است مانند دسترسی به یک پایگاه داده. تصور کنید که پایگاه داده ای در سرور خود دارید که شامل مشتریان، محصولات و تامین کننده های آن محصولات است. حالا می خواهید درخواستی به سرور بدهید که 10 ردیف اول جدول customers (به معنی «مشتریان») را به ما بدهد:
<!DOCTYPE html> <html> <body> <h2>Get data as JSON from a PHP file on the server.</h2> <p>The JSON received from the PHP file:</p> <p id="demo"></p> <script> var obj, dbParam, xmlhttp; obj = { "table":"customers", "limit":10 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true); xmlhttp.send(); </script> </body> </html>
خروجی این دستور به این صورت است:
[{"name":"Alfreds Futterkiste"},{"name":"Ana Trujillo Emparedados y helados"},{"name":"Antonio Moreno Taqueria"},{"name":"Around the Horn"},{"name":"Berglunds snabbkop"},{"name":"Blauer See Delikatessen"},{"name":"Blondel pere et fils"},{"name":"Bolido Comidas preparadas"},{"name":"Bon app'"},{"name":"Bottom-Dollar Marketse"}]
توضیح مثال بالا:
در مثال بالا ابتدا یک شیء را تعریف کرده ایم که خاصیت table (جدول) و limit (محدودیت) داشته باشد:
obj = { "table":"customers", "limit":10 };
سپس یک شیء را تبدیل به یک رشته ی JSON کرده ایم:
dbParam = JSON.stringify(obj);
بعد از آن درخواستی به فایل PHP فرستاده ایم و رشته ی JSON را به عنوان یک پارامتر به آن اضافه کرده ایم. صبر می کنیم تا نتیجه به صورت JSON برایمان ارسال شود و در آخر داده های ارسالی از سمت فایل PHP را نمایش می دهیم. سورس کد فایل PHP ما در سمت سرور به این شرح است:
<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $stmt = $conn->prepare("SELECT name FROM ? LIMIT ?"); $stmt->bind_param("ss", $obj->table, $obj->limit); $stmt->execute(); $result = $stmt->get_result(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo json_encode($outp); ?>
توضیح این فایل:
با استفاده از تابع ()json_decode
درخواست را به یک شیء تبدیل می کند:
$obj = json_decode($_GET["x"], false);
سپس به پایگاه داده متصل شده و داده های درخواست شده را در یک آرایه می ریزیم:
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $stmt = $conn->prepare("SELECT name FROM ? LIMIT ?"); $stmt->bind_param("ss", $obj->table, $obj->limit); $stmt->execute(); $result = $stmt->get_result(); $outp = $result->fetch_all(MYSQLI_ASSOC);
(چنانچه از نحوه ی اتصال به پایگاه داده چیزی نمیدانید به دوره ی آموزشی «آموزش صفر تا صد PDO» مراجعه کنید)
در آخر نیز آرایه را به یک شیء اضافه کرده و با استفاده از تابع ()json_encode
آن را به عنوان JSON برمیگردانیم.
ما برای گردش در نتیجه ی برگشتی می توانیم نتیجه را به صورت یک شیء یا آرایه ی جاوا اسکریپتی در بیاوریم:
<!DOCTYPE html> <html> <body> <h2>Get data as JSON from a PHP file on the server.</h2> <p id="demo"></p> <script> var obj, dbParam, xmlhttp, myObj, x, txt = ""; obj = { "table":"customers", "limit":10 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); for (x in myObj) { txt += myObj[x].name + "<br>"; } document.getElementById("demo").innerHTML = txt; } }; xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true); xmlhttp.send(); </script> <p>Try changing the "table" property from "customers" to "products".</p> </body> </html>
خروجی این کد مقدار زیر خواهد بود:
Alfreds Futterkiste Ana Trujillo Emparedados y helados Antonio Moreno Taqueria Around the Horn Berglunds snabbkop Blauer See Delikatessen Blondel pere et fils Bolido Comidas preparadas Bon app' Bottom-Dollar Marketse
در واقع در این کد از تابع ()JSON.parse
استفاده کرده ایم تا JSON را به شیء جاوا اسکریپتی تبدیل کنیم.
هنگام ارسال داده ها به سمت سرور بهتر است از متد POST استفاده کنید. برای آنکه درخواست های AJAX نیز به صورت POST
ارسال شوند باید متد را در درخواست مشخص کرده و header را نیز تصحیح کنید؛ در این حالت داده هایی که میخواهیم به سمت سرور بفرستیم باید آرگومان هایی برای ()send
باشند:
<!DOCTYPE html> <html> <body> <h2>Use the HTTP method POST to send data to the PHP file.</h2> <p id="demo"></p> <script> var obj, dbParam, xmlhttp, myObj, x, txt = ""; obj = { "table":"customers", "limit":10 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); for (x in myObj) { txt += myObj[x].name + "<br>"; } document.getElementById("demo").innerHTML = txt; } }; xmlhttp.open("POST", "json_demo_db_post.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam); </script> <p>Try changing the "table" property from "customers" to "products".</p> </body> </html>
خروجی این کد مقدار زیر خواهد بود:
Alfreds Futterkiste Ana Trujillo Emparedados y helados Antonio Moreno Taqueria Around the Horn Berglunds snabbkop Blauer See Delikatessen Blondel pere et fils Bolido Comidas preparadas Bon app' Bottom-Dollar Marketse
در واقع کد بالا با کد های قبلی یکسان است به غیر از این قسمت:
xmlhttp.open("POST", "json_demo_db_post.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam);
از طرفی تنها تفاوتی که در فایل PHP ایجاد شده است، متد دریافت اطلاعات است:
<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_POST["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $stmt = $conn->prepare("SELECT name FROM ? LIMIT ?"); $stmt->bind_param("ss", $obj->table, $obj->limit); $stmt->execute(); $result = $stmt->get_result(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo json_encode($outp); ?>
بنابراین خطی که تغییر کرده است، این خط است:
$obj = json_decode($_POST["x"], false);
امیدوارم از این قسمت لذت برده باشید.
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.