HTML در JSON

از موتو کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از JavaScript:JS JSON/Html در json)

JSON می‌تواند به راحتی به جاوا اسکریپت ترجمه شود. [۱]

جاوا اسکریپت می‌تواند برای ساخت HTML در صفحه‌های وب شما استفاده شود.

جدول HTML[ویرایش | ویرایش]

ساخت یک جدول HTML با استفاده از داده‌های دریافت شده به صورت JSON:

مثال[ویرایش | ویرایش]

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);


مشاهدهٔ نتیجه


جدول HTML داینامیک (به فارسی: پویا)[ویرایش | ویرایش]

ایجاد یک جدول HTML با توجه به مقدار انتخاب شده در منوی کشویی: Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال[ویرایش | ویرایش]

<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>

<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>


مشاهدهٔ نتیجه


لیست کشویی در HTML[ویرایش | ویرایش]

ساخت یک منوی کشویی HTML با اطلاعات دریافتی از سمت سرور به صورت JSON:

مثال[ویرایش | ویرایش]

<syntaxhighlight lang="">
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);


مشاهدهٔ نتیجه



منابع آموزشی[ویرایش]