~~~ /* * 1.獲取數據和實現數據綁定 * =>真實項目中，頁面中大部分數據都不是寫死的，而是動態綁定的 * A:從服務器端獲取到數據（基于AJAX/JSONP等技術， * 通過服務器端提供的數據API接口地址，把數據請求回來） * B:把獲取的數據進行解析 * C:把數據綁定在HTML頁面中(數據綁定)：ES6中的模板字符串 */ let productData = null; let xhr = new XMLHttpRequest(); xhr.open('GET', 'json/product.json', false); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { productData = xhr.responseText; } }; xhr.send(null); //=>獲取的結果是一個字符串:"JSON格式的字符串"， 我們此時需要把獲取的字符串轉換為對象 /* * JSON格式：JSON不是一種數據類型，而是一種數據格式， * 只要把對象的屬性名用雙引號括起來，此時的對象就不再稱之為普通對象， * 而是叫做JSON格式的對象 * * 從服務器端獲取的數據格式一般都是JSON格式的(大部分都是JSON格式字符串) * window.JSON * 1.parse：把JSON格式的字符串轉換為對象 * 2.stringify：把對象轉換為JSON格式的字符串 * * window.JSON.parse() * JSON.parse() */ // let obj = {"name": "xxx"};//=>OBJ是JSON格式對象 （操作起來和普通對象沒啥太大區別） // let str = '{"name": "xxx"}';//=>JSON格式的字符串 productData = JSON.parse(productData); //=>數據綁定（DOM數據綁定）：依托獲取的數據， 把頁面中需要展示的數據和結構都搞出來， 然后把創建好的數據和結構放到頁面指定容器中 /* * 1.字符串拼接 * ->傳統字符串拼接 * ->ES6模板字符串拼接 * ->模板引擎:原理也是字符串拼接 * * 2.動態創建DOM * ->createElement * ->appendChild * 弊端：操作起來太麻煩，而且性能消耗更大（DOM回流） */ let list = document.getElementById('list'); let str = ``;//=>這是兩個撇(TAB上邊按鍵) ES6模板字符串 for (let i = 0; i < productData.length; i++) { let { title, img = 'img/1.jpg',//=>沒有返回IMG,我們用默認圖占位 price } = productData[i]; str += `<li><a href="javascript:;"> <img src="${img}" alt=""> <p>${title}</p> <span>${price}</span> </a></li>`; } list.innerHTML = str; ~~~