HTML در JSON

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

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

جدول HTML

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

مثال

 1obj = { table: "customers", limit: 20 };
 2dbParam = JSON.stringify(obj);
 3xmlhttp = new XMLHttpRequest();
 4xmlhttp.onreadystatechange = function() {
 5  if (this.readyState == 4 && this.status == 200) {
 6    myObj = JSON.parse(this.responseText);
 7    txt += "<table border='1'>"
 8    for (x in myObj) {
 9      txt += "<tr><td>" + myObj[x].name + "</td></tr>";
10    }
11    txt += "</table>"
12    document.getElementById("demo").innerHTML = txt;
13  }
14}
15xmlhttp.open("POST", "json_demo_db_post.php", true);
16xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
17xmlhttp.send("x=" + dbParam);

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

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

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

مثال

 1<select id="myselect" onchange="change_myselect(this.value)">
 2  <option value="">Choose an option:</option>
 3  <option value="customers">Customers</option>
 4  <option value="products">Products</option>
 5  <option value="suppliers">Suppliers</option>
 6</select>
 7
 8<script>
 9function change_myselect(sel) {
10  var obj, dbParam, xmlhttp, myObj, x, txt = "";
11  obj = { table: sel, limit: 20 };
12  dbParam = JSON.stringify(obj);
13  xmlhttp = new XMLHttpRequest();
14  xmlhttp.onreadystatechange = function() {
15    if (this.readyState == 4 && this.status == 200) {
16      myObj = JSON.parse(this.responseText);
17      txt += "<table border='1'>"
18      for (x in myObj) {
19        txt += "<tr><td>" + myObj[x].name + "</td></tr>";
20      }
21      txt += "</table>"
22      document.getElementById("demo").innerHTML = txt;
23    }
24  };
25  xmlhttp.open("POST", "json_demo_db_post.php", true);
26  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
27  xmlhttp.send("x=" + dbParam);
28}
29</script>

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

لیست کشویی در HTML

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

مثال

 1<syntaxhighlight lang="">
 2obj = { table: "customers", limit: 20 };
 3dbParam = JSON.stringify(obj);
 4xmlhttp = new XMLHttpRequest();
 5xmlhttp.onreadystatechange = function() {
 6  if (this.readyState == 4 && this.status == 200) {
 7    myObj = JSON.parse(this.responseText);
 8    txt += "<select>"
 9    for (x in myObj) {
10      txt += "<option>" + myObj[x].name;
11    }
12    txt += "</select>"
13    document.getElementById("demo").innerHTML = txt;
14  }
15}
16xmlhttp.open("POST", "json_demo_db_post.php", true);
17xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
18xmlhttp.send("x=" + dbParam);

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

---

« صفحهٔ قبل

صفحهٔ بعد »