در جلسه ی قبل با تابع JSON.parse آشنا شدیم و گفتیم که در هنگام دریافت اطلاعات از سرور می توانیم با JSON.parse رشته ی JSON را parse (تجزیه) کنیم. امروز می خواهیم توضیحاتی در مورد ارسال اطلاعات به سرور ارائه کنیم؛ هنگامی که میخواهیم اطلاعاتی را به سرور ارسال کنیم، داده ها رشته ای خواهند بود. ما می توانیم اشیاء جاوا اسکریپت را با استفاده از تابع ()JSON.stringify
به یک رشته تبدیل کنیم (یعنی دقیقا برعکس تابع JSON.parse).
تصور کنید که این شیء جاوا اسکریپتی را داشته باشیم:
var obj = { name: "John", age: 30, city: "New York" };
با استفاده از JSON.stringify
می توانیم آن را به یک رشته تبدیل کنیم:
var myJSON = JSON.stringify(obj);
خروجی این کد یک رشته خواهد بود که بر اساس قواعد نگارش JSON نوشته شده است. myJSON
حالا یک رشته است و میتواند در سرور مورد استفاده قرار بگیرد:
<!DOCTYPE html> <html> <body> <h2>Create JSON string from a JavaScript object.</h2> <p id="demo"></p> <script> var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; </script> </body> </html>
ما می توانیم آرایه ها را نیز به صورت رشته ای در بیاوریم. به طور مثال اگر آرایه ی زیر را داشته باشیم:
var arr = [ "John", "Peter", "Sally", "Jane" ];
می توانیم از JSON.stringify
استفاده کنیم تا آن را به یک رشته تبدیل کنیم:
var myJSON = JSON.stringify(arr);
خروجی این کد نیز یک رشته خواهد بود که بر اساس قواعد نگارش JSON نوشته شده است. حالا myJSON
باز هم یک رشته است که میتواند در سمت سرور کار کند:
<!DOCTYPE html> <html> <body> <h2>Create JSON string from a JavaScript array.</h2> <p id="demo"></p> <script> var arr = [ "John", "Peter", "Sally", "Jane" ]; var myJSON = JSON.stringify(arr); document.getElementById("demo").innerHTML = myJSON; </script> </body> </html>
در مورد ارسال JSON به سرور در جلسات بعد صحبت خواهیم کرد.
همانطور که میدانید تاریخ ها در JSON غیر مجاز هستند بنابراین می توانیم از ()JSON.stringify
استفاده کنیم و هر نوع تاریخی را به صورت رشته در بیاوریم:
<!DOCTYPE html> <html> <body> <h2>JSON.stringify will convert any date objects into strings.</h2> <p id="demo"></p> <script> var obj = { name: "John", today: new Date(), city: "New York" }; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; </script> </body> </html>
از دیگر موارد غیر مجاز در JSON، توابع هستند. ممکن است فکر کنید که تابع JSON.stringify
توابع را به صورت رشته ای در میآورد اما اشتباه می کنید! تابع JSON.stringify
در صورت برخورد با توابع هم key و هم value را حذف می کند:
<!DOCTYPE html> <html> <body> <h2>JSON.stringify will remove any functions from an object.</h2> <p id="demo"></p> <script> var obj = { name: "John", age: function () {return 30;}, city: "New York" }; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; </script> </body> </html>
بنابراین تمام تابع شما حذف می شود. اگر میخواهید توابعتان حذف نشوند باید قبل از اینکه آن ها را به دستور JSON.stringify
بدهید، آن ها را تبدیل به رشته کنید. مثال:
<!DOCTYPE html> <html> <body> <h2>JSON.stringify will remove any functions from an object.</h2> <p>Convert the functions into strings to keep them in the JSON object.</p> <p id="demo"></p> <script> var obj = { name: "John", age: function () {return 30;}, city: "New York" }; obj.age = obj.age.toString(); var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; </script> </body> </html>
همانطور که در قسمت قبل گفتیم این کار به هیچ عنوان پیشنهاد نمی شود چرا که دردسر ها و خطاهای خودش را دارد و توابع نیز scope خود را از دست می دهند.
تابع ()JSON.stringify
در تمام مروگر های مدرن و آخرین نسخه ی ECMAScript نیز پشتیبانی می شود. به طور دقیق تر:
گفتیم که JSON می تواند به راحتی تبدیل به جاوا اسکریپت شود، بنابراین می توانیم از این قابلیت استفاده کنیم تا کدهای HTML بسازیم.
به طور مثال ابتدا سراغ یک جدول HTML می رویم:
<!DOCTYPE html> <html> <body> <h2>Make a table based on JSON data.</h2> <p id="demo"></p> <script> var obj, dbParam, xmlhttp, myObj, x, txt = ""; obj = { table: "customers", limit: 20 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); txt += "<table border='1'>" for (x in myObj) { txt += "<tr><td>" + myObj[x].name + "</td></tr>"; } txt += "</table>" 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> </body> </html>
حالا می توانیم جدول را کمی پویا تر کنیم:
<!DOCTYPE html> <html> <body> <h2>Make a table based on the value of a drop down menu.</h2> <select id="myselect" onchange="change_myselect(this.value)"> <option value="">Choose an option:</option> <option value="customers">Customers</option> <option value="products">Products</option> <option value="suppliers">Suppliers</option> </select> <p id="demo"></p> <script> function change_myselect(sel) { var obj, dbParam, xmlhttp, myObj, x, txt = ""; obj = { table: sel, limit: 20 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); txt += "<table border='1'>" for (x in myObj) { txt += "<tr><td>" + myObj[x].name + "</td></tr>"; } txt += "</table>" 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> </body> </html>
حتی می توانیم از جدول استفاده نکنیم بلکه داده ها را به صورت JSON گرفته و سپس آن ها را در لیست dropdown قرار دهیم! به مثال زیر توجه کنید:
<!DOCTYPE html> <html> <body> <h2>Make a drop down list based on JSON data.</h2> <p id="demo"></p> <script> var obj, dbParam, xmlhttp, myObj, x, txt = ""; obj = { table: "customers", limit: 20 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); txt += "<select>" for (x in myObj) { txt += "<option>" + myObj[x].name; } txt += "</select>" 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> </body> </html>
امیدوارم از این قسمت لذت برده باشید.
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسشهای تخصصی شما دربارهی محتوای مقاله پاسخ داده نمیشود. سوالات خود را اینجا بپرسید.