JSON و HTML (JSON HTML)
اینجا با «JSON و HTML» کار می کنیم. JSON فقط متن است. جاوااسکریپت متن را می گیرد و به شیء تبدیل می کند. سپس با رشته سازی، از شیء HTML می سازد و در صفحه می گذارد.
ساخت جدول HTML از JSON
ابتدا درخواست POST می فرستیم. سپس JSON را پارس می کنیم. بعد، با رشته سازی سطرهای جدول را می سازیم.
const dbParam = JSON.stringify({ table: "customers", limit: 20 });
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = "<table border='1'>";
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;
};
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
نکته: پارس (Parse) یعنی تبدیل متن JSON به شیء. ببین: JSON Parse.
جدول پویا با منوی کشویی
انتخاب کاربر، نام جدول را تعیین می کند. سپس همان منطق ساخت جدول اجرا می شود.
function change_myselect(sel) {
const dbParam = JSON.stringify({ table: sel, limit: 20 });
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = "<table border='1'>";
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;
};
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
فهرست کشویی از JSON
می خواهیم <select> بسازیم. برای هر آیتم، یک <option> اضافه می کنیم.
const dbParam = JSON.stringify({ table: "customers", limit: 20 });
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = "<select>";
for (let x in myObj) {
text += "<option>" + myObj[x].name + "</option>";
}
text += "</select>";
document.getElementById("demo").innerHTML = text;
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
هشدار: برای جلوگیری از XSS، متن ها را ایمن کنید. مستقیم HTML کاربر را نگذار.
گام های عملی JSON و HTML
- درخواست AJAX بساز.
- پاسخ را با
JSON.parse()بخوان. - رشته HTML را مرحله ای تولید کن.
- با
innerHTMLدر صفحه نمایش بده.
جمع بندی سریع
- JSON متن است؛ باید پارس شود.
- ساخت جدول با حلقه ساده است.
- انتخاب کاربر، داده جدول را عوض می کند.
- ورودی ها را همیشه ایمن سازی کن.
منابع داخلی: JSON و PHP، سرور JSON، و JSON Stringify. همچنین این صفحه JSON و HTML.