從本地獲取到json檔案，并進行動態的渲染demo來啦~
此文章對table表格，nth

1.關于工具

1.Vscode

常用的前端代碼開發工具就是Vscode，接觸過編程的uu肯定都聽過，甚至是有把vscode已經玩轉的大佬，還有HBuilder、sublime也很好用啦，下面的代碼都是在Vscode里撰寫的，長這樣色兒

1.Emmet語法

Vscode中自帶了一些Emmet的語法，可以快速的生成你想要的代碼，這里小M.給大家演示幾個常用的
1.快速生成多個相同的標簽
輸入想要寫的標簽num 比如我想要3個div
就會變成你想要的
2.生成帶有ID或者class的標簽

id就在標簽后用#，class用.
然后就是得到了

想要生成多個，就可以在后邊你想要的數字
我常用的就這兩個，更多的Emmet語法可以參考官方的檔案哦

2.插件

第一個安頭安利的插件就是Preview on Web Server
安裝插件在這個地方

點進去后，在搜索框輸入Preview on Web Server

就會看到一個綠色兒的插件啦，如下圖，然后點擊右下角的install（我已經安裝過了，所以會變成一個設定圖示）

安裝好后是這個亞子的

接下來就可以
1.模擬在服務器訪問的狀態在瀏覽器訪問（還會和瀏覽器實時更新哦，也就是說媽媽再也不用擔心保存完代碼，忘記在瀏覽器重繪啦）
2.直接在Vscode中實時訪問
演示一下吧
在html頁面右鍵
點擊可以在瀏覽器實時訪問
這個可以在軟體中實時訪問

emm 還有些插件也很好用，但在這個demo里用不上，咱就下次再聊

2.html部分

我用的是table標簽，方便后續的渲染

 <table>
        <thead>
            <th>學號</th>
            <th>姓名</th>
            <th>性別</th>
        </thead>
        <tbody>
        </tbody>
    </table>

你會得到一個有表頭，暫時沒有身子的表格，在tbody中我們會拿到資料再渲染上去

3.css部分

我們設定點小花樣，讓奇數行和偶數行的顏色不一樣

 * {
            margin: 0;
            padding: 0;
        }
        
        table {
            border-collapse: collapse;/*可以讓表格的邊框重疊顯示*/
        }
        
        table,
        th,
        td {
            border: 1px rgb(175, 175, 175) solid; /*給每個小方框設定邊框*/
            padding: 5px 20px 5px 20px; /*改變方格中文字的邊距，讓整個方格不那么擠*/
            /*上  右 下 左*/
            text-align: center;/*文字居中*/
        }
        
        /*設定表頭得樣式*/
        table thead {
            background-color: rgb(241, 221, 221) ;
        }
        
        /*設定奇數和偶數行不同 樣式不同*/
        tbody tr:nth-child(2n+1) {
            /*nth-child選擇器會選擇tbody下面得2n+1或者odd奇數得tr*/
            background-color: rgb(192, 236, 192);
        }
        /*同理偶數可改為2n  或者 odd*/
        
        tbody tr:nth-child(even) {
            /*nth-child選擇器會選擇tbody下面得2n+1或者even偶數得tr*/
            background-color: rgb(148, 187, 231);
        }
        
        /*觸碰變色效果*/
        tbody tr:hover {
            background-color: rgb(219, 206, 248);
            color: rgb(255, 255, 255);
            /*滑鼠樣式*/
            cursor: pointer;
        }

4.js部分

我們先捋一捋思路哈

1.ajax（）

首先要使用ajax獲取到本地或者部署在服務器，再或是寫好的介面中的資料（還有其他方法也可以獲取獲取，但我們先用最簡單的ajax），前提是必須引入jquery檔案，可以通過cdn的鏈接（前提是有網），也可以用本地的jq檔案，我這里用的是本地的方式引入
這邊提供一個百度的cdn

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.寫一個本地的json檔案

注意在json檔案中，基本都以物件陣列的形式存盤資料，別忘記了些逗號，和中括號[]

 [{
     "id": 1,
     "name": "小M",
     "sex": "女"
 }, {
     "id": 2,
     "name": "小O",
     "sex": "女"
 }, {
     "id": 3,
     "name": "小A",
     "sex": "男"
 }, {
     "id": 4,
     "name": "小N",
     "sex": "女"
 }]

用ajax得到資料，我這里是訪問的本地的json檔案，在success中獲取資料，可以在控制臺列印出來看一下，有沒有獲取成功

$.ajax({
            url: "test.json", //也可以把json檔案部署到tomcat的本地服務器
            type: "GET",
            dataType: "json",
            success: function(data) {
                console.log(data);
                //  way1(data);
                //    way2(data);
                way3(data);
            },
            error: function(data) {
                console.log("error!");
            }
        })

訪問本地的json可能會碰到瀏覽器跨域的問題，所以上面介紹的插件就派上用場了，用剛剛介紹的方法在瀏覽器中模擬服務器的狀態打開，就可以得到資料啦
控制臺的資料如下，獲取到的是一個長度為4的物件陣列

3.渲染資料

我用了3種方式來實作渲染

1.創建節點createElment（）

 /*1.使用createElement的方式*/
        function way1(data) {
            for (let i = 0; i < data.length; i++) {
                let tr = document.createElement("tr");
                body.innerHTML += '<td > ' + data[i].id + '<td >  ' + data[i].name + '<td > ' + data[i].sex;
            }
        }

2.ES6的反引號獲取字串

 /*2.使用ES6的反引號*/
        function way2(data) {
            for (let i = 0; i < data.length; i++) {
                let text = `<tr><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].sex}</td></tr>`
                body.innerHTML += text;
            }
        }

反引號在鍵盤的左上角，數字1旁邊，和~這個一起的按鍵上，使用反引號可以直接用${}的方式獲取資料，就不用再寫+，當然，用傳統的+的方式連接也是可以的，類似第一種方法

3.insertAdjacentHTML()方法

這個方法的值可以去MDN里康康，這里就不細講

/*使用insertAdjacentHTML方法*/
        function way3(data) {
            for (let i = 0; i < data.length; i++) {
                let text = `<tr><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].sex}</td></tr>`
                body.insertAdjacentHTML("beforeend", text)
            }
        }

完整的js代碼如下：

//頁面加載時就運行
    //等同于window.onload=function(){}
    window.addEventListener("load", function() {
        /*首先獲取需要放置行元素的大盒子*/
        var body = document.querySelector("tbody");
        /*從ajax獲取資料，動態渲染*/
        /*使用ajax需要先參考Jqery，我這里使用本地檔案的方式引入*/
        $.ajax({
            url: "test.json", //也可以部署到tomcat的本地服務器
            type: "GET",
            dataType: "json",
            success: function(data) {
                console.log(data);
                //  way1(data);
                //    way2(data);
                way3(data);
            },
            error: function(data) {
                console.log("error!");
            }
        })

        /*1.使用createElement的方式*/
        function way1(data) {
            for (let i = 0; i < data.length; i++) {
                let tr = document.createElement("tr");
                body.innerHTML += '<td > ' + data[i].id + '<td >  ' + data[i].name + '<td > ' + data[i].sex;
            }
        }
        /*2.使用ES6的反引號*/
        function way2(data) {
            for (let i = 0; i < data.length; i++) {
                let text = `<tr><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].sex}</td></tr>`
                body.innerHTML += text;
            }
        }

        /*使用insertAdjacentHTML方法*/
        function way3(data) {
            for (let i = 0; i < data.length; i++) {
                let text = `<tr><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].sex}</td></tr>`
                body.insertAdjacentHTML("beforeend", text)
            }
        }
    })

我們來康康最終的效果吧


簡單的ajax渲染就完成了
完整的原始碼或者有問題，和不正確的地方可以私信或者評論區見

祝福

都看到（滑到）這兒，不如給個大指拇的點贊吧！！！小M.祝大家學習順利，考試順利，作業順利！

轉載：歡迎轉載，但未經作者同意，必須保留此段宣告；必須在文章中給出原文連接；否則必究法律責任，

勿杠