JSON HTML

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

Δοκιμάστε το προσωπικά