• JSON PHP
• JSON JSONP

JSON 非常易于转译为 JavaScript。

JavaScript 可用于在网页中生成 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 表格基于下拉列表的值：选择一个选项： Customers Products Suppliers

实例

<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 下拉列表

用接收到的 JSON 数据来生成 HTML 下拉列表：

实例

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

亲自试一试