使用seajs模块化ajax动态生成表格功能

最新推荐文章于 2021-08-05 23:24:55 发布

xin_x1n

最新推荐文章于 2021-08-05 23:24:55 发布

阅读量1.1k

点赞数 1

文章标签： seajs 模块化 ajax

本文链接：https://blog.csdn.net/xin_x1n/article/details/53045994

版权

html页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <div id="div1"></div>
</body>
<script src="js/sea.js"></script>
<script src="js/seajs-css.js"></script>
<script>
    //配置seajs目标文件
    seajs.config({
        alias:{
            //引入文件因放在同级目录下的js文件夹下
            'createT' : 'demo-createTable.js',
            'jquery' : 'jquery.min.js'
        }
    });


    //使用接口定义的createTable方法和定义的css样式
    seajs.use(['createT','css/createTable.css'], function(createT){
        //传入json文件的路径
        createT.createTable("data/products.json");
    });
</script>
</html>

demo-createTable.js模块文件内容：

/**
 * Created by 93585 on 2016/10/18.
 */
define(function (require, exports, module) {

    exports.createTable = function(url){
        var jq = require('jquery');

        //使用原生js方法
        if(XMLHttpRequest){
            //根据传入的url解析获取的数据
            var xhr = new XMLHttpRequest();
            xhr.open('GET',url,false);
            xhr.send();

            var d = eval("("+ xhr.responseText +")");
            var tb = document.createElement('table');
            tb.id = 'jsonTable';
           // tb.border = "1";
            tb.width = window.innerWidth / 3 + "px";

            //取出数据的表头内容
            for(var k in d[0]){
                var th = document.createElement("th");
                var thText = document.createTextNode(k);
                th.appendChild(thText);
                tb.appendChild(th);
            }

            //取出数据的表格内容
            for (var i in d) {
                var tr = document.createElement('tr');
                for (var j in d[i]) {
                    var td = document.createElement('td');
                    td.innerText = d[i][j];
                    tr.appendChild(td);
                }
                tb.appendChild(tr);
            }
            document.getElementById("div1").appendChild(tb);
            //alert(data[0].productid);
        }

        //使用jquery ajax方法
       /* $.ajax({
            url: url,
            type: "post",
            success: function (data) {
                var d = eval("("+ data + ")");
                var tb = document.createElement('table');
                tb.border = "1";
                tb.width = window.innerWidth / 3 + "px";

                for (var i in d) {
                    var tr = document.createElement('tr');
                    for (var j in d[i]) {
                        var td = document.createElement('td');
                        td.innerText = d[i][j];
                        tr.appendChild(td);
                    }
                    tb.appendChild(tr);
                }
                $("#div1").append(tb);
                //alert(data[0].productid);
            }
        })*/
    }
});

createTable.css 样式文件内容：

#jsonTable{
    text-align: center;
    border-spacing:0 ;
}

body{
    text-align: center;

}
#jsonTable tr td{
    border: 1px solid saddlebrown;
}
#jsonTable th{
    border: 1px solid saddlebrown;
}
#div1 {
    width: 500px;
    margin: 0 auto;

}