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 با توجه به مقدار انتخاب شده در منوی کشویی: Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

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


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



منابع آموزشی