JSON HTML

  • পূর্ববর্তী পৃষ্ঠা JSON PHP
  • পরবর্তী পৃষ্ঠা JSON JSONP

জিএসওয়ার জেভাস্ক্রিপ্টে রূপান্তর করা অত্যন্ত সহজ

জেভাস্ক্রিপ্ট ওয়েবসাইটে এইমধ্যে হাইপারটেক্সট টেবিল তৈরি করতে ব্যবহার হয়。

হাইপারটেক্সট টেবিল

জিএসওয়ার মাধ্যমে পাওয়া ডাটা ব্যবহার করে টেবিল তৈরি করুন:

উদাহরণ

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

আপনার নিজেই প্রয়াস করুন

ডাইনামিক হাইপারটেক্সট টেবিল

এইমধ্যে হাইপারটেক্সট টেবিলকে ড্রপডাউন লিস্টের মাধ্যমে ভিত্তি করে নিন: একটি অপশন নির্বাচন করুন: 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);

আপনার নিজেই প্রয়াস করুন

  • পূর্ববর্তী পৃষ্ঠা JSON PHP
  • পরবর্তী পৃষ্ঠা JSON JSONP