JSON HTML

Данные JSON очень легко могут быть преобразованы в JavaScript.

JavaScript же может использоваться для динамического изменения 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 таблицу, основываясь на значении выпадающего меню:

<select id="myselect" onchange="change_myselect(this.value)">
    <option value="">Выберите значение:</option>
    <option value="customers">Покупатели</option>
    <option value="products">Товары</option>
    <option value="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:

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