JS 繫結資料說明

2017-05-09
透過js繫結資料到html網頁是前端工程常用的方法,常用的資料集格式有JSON及XML,以下說明如何實作:

XML

XML資料集
< ?xml version='1.0' ?>
< doc>
    < dataset>
        < data1>data1< /data1>
        < data2>data2< /data2>
        < data3>data3< /data3>
    < /dataset>
    < dataset>
        < data1>data1< /data1>
        < data2>data2< /data2>
        < data3>data3< /data3>
    < /dataset>
    < dataset>
        < data1>data1< /data1>
        < data2>data2< /data2>
        < data3>data3< /data3>
    < /dataset>
< /doc>

透過jquery ajax來把外部xml資料讀進來進行處理
$.ajax({
    url: 'data.xml',
    type: 'GET',
    dataType: "xml",
    success: function(data) {
        //get xml data
        var itemSet = $(data).find('dataset');
                
        //read each data
        itemSet.each(function(){
            var data1 = $(this).find('title').text(),
                data2 = $(this).find('url').text(),
                data2 = $(this).find('image').text();

            //do something with data
            
        });
})

不透過JQuery讀取xml資料集

var xhr;
if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers except IE
else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE
 
xhr.open('GET', 'data.xml', false);
xhr.onreadystatechange = function () {
if (xhr.readyState===4 && xhr.status===200) {
var items = xhr.responseXML.getElementsByTagName('name');
var output = '< ul>';
for (var i=0; i<items.length; i++) output += '< li>' + items[i].firstChild.nodeValue + '< /li>';
output += '< /ul>';
 
var div = document.getElementById('update');
div.innerHTML = output;
}
}
xhr.send();


JSON

JSON資料集
[
    {
        "data1": "data1",
        "data2": "data2",
        "data3": "data3"
    },
    {
        "data1": "data1",
        "data2": "data2",
        "data3": "data3"
    },
    {
        "data1": "data1",
        "data2": "data2",
        "data3": "data3"
    }
]

透過JQuery ajax讀取json資料集
$.ajax({
     url: "data.json",
     type: "GET",
     dataType: "JSON",
     success: function(data){
           var json = $.parseJSON(data);

           for (var $k in data) {
                   var data1 = data[$k]['data1'],
                    data2 = data[$k]['data2'],
                    data2 = data[$k]['data3'];

                //do something with data
           }
     }
})

不透過JQuery讀取json資料集
var xhr;
if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers except IE
else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE
 
xhr.open('GET', 'data.json', false);
xhr.onreadystatechange = function () {
if (xhr.readyState===4 && xhr.status===200) {
var items = JSON.parse(xhr.responseText);
var output = '< ul>';
for (var key in items) {
output += '< li>' + items[key].name + '</li>';
}
output += '< /ul>';
document.getElementById('update').innerHTML = output;
}
}
xhr.send();

資料來源: w3epic.com

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【107690】
digishot webdesign studio