۲۵
آبان

جلسه ۱۱۰ : استفاده از JSON در HTML

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم. در این جلسه قصد داریم به آموزش و استفاده از JSON در HTML بپردازیم.

JSON خیلی راحت به اشیا جاوا اسکریپت تبدیل می شود و جاوا اسکریپت می تواند برای ساخت صفحات وب 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);

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 را بر اساس مقدار منوی کشویی (drop down) ایجاد کنیم:

مثال :

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

<option value="">Choose an option:</option>

<option value="customers">Customers</option>

<option value="products">Products</option>

<option value="suppliers">Suppliers</option>

</select>

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 ایجاد می کنیم:

مثال :

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

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

جلسه آموزش و استفاده از json در html نیز به پایان رسید.
در جلسه بعد به آموزش JSONP خواهیم پرداخت. با ما همراه باشید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۱۰ : استفاده از JSON در HTML

جدول HTML

جدول HTML پویا

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

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ