这是一个基于XMLHttpRequest对象的AJAX请求示例。它发送一个GET请求到"js/index.json"接口，并处理返回的数据。
首先，通过实例化一个XMLHttpRequest对象来创建一个新的请求。然后，使用open()方法设置请求的类型为GET，并指定要请求的URL。第三个参数为true表示使用异步请求。接下来，使用send()方法发送请求。
接着，通过设置onreadystatechange事件监听器来监听请求状态的变化。当readyState为4（即请求已完成）且status为200（即请求成功）时，通过responseText属性获取响应的文本内容，并将其解析为JSON对象。然后调用item()函数来渲染或显示数据，以及调用increase()函数来渲染或显示计算总数和总价格的数据。
其他部分的代码是用来定义一些变量和函数，包括渲染函数item()、增加或减少数量的函数increase()、计算总数量和总价格的函数calculate()、显示购物车的函数shops()、关闭购物车的函数closesfy()、清空购物车的函数empty()。
其中，item()函数用于将数据渲染到页面上，increase()函数用于增加或减少数量，calculate()函数用于计算总数量和总价格，shops()函数用于显示购物车，closesfy()函数用于关闭购物车，empty()函数用于清空购物车。
这段代码使用了XMLHttpRequest对象来发送异步请求并处理返回的数据，可以用于从服务器获取数据并动态地将其显示在页面上。
javascript
let xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象，命名为xhr。用来请求接口，处理异步操作； xhr.open('get', 'js/index.json', true); // 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。 xhr.send(); //发送要请求的要求 xhr.onreadystatechange = function() { // 设置一个事件监听器，当请求的状态发生变化时，这个函数就会被调用。 if (xhr.readyState == 4 && xhr.status == 200) { // 检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。 let text = xhr.responseText; // 获取响应的文本内容 data = JSON.parse(text); // 将响应的文本内容解析为JSON对象，并将其赋值给变量data。 item(data); // 调用一个名为item的函数，并传入data作为参数。用来渲染或显示数据的函数。 increase(data); // 用来渲染或显示计算总数和总价格数据的函数 } }; let data = []; //创建一个变量以方便存储数据 let hint = document.getElementById('hint'); let totalPrice = document.getElementsByClassName('totalPrices')[0]; let nulls = document.getElementsByClassName('nulls')[0]; //总数量和总价格以方便全局使用 let itemsShop; let nums; //总价格 let totalPrices; //总数量 function item(data) { //渲染函数 nums = 0; //总数量 totalPrices = 0; //总价格 let str = ''; // 用于构建一个HTML字符串 let strs = ''; // 用于构建一个HTML字符串 // 遍历 JSON 对象生成 HTML 字符串 for (let i = 0; i < data.length; i++) { // 用于遍历data数组 // 这是一个字符串连接操作， str += ` <div class="shop"> <div class="shopLeft"> <img src="${data[i].img}" alt="" /> </div> <div class="shopRight"> <div class="shopRighttop"> <p>${data[i].name}</p> </div> <div class="shopRightBotton"> <p>￥：${data[i].price}</p> `; if (data[i].num == 0) { str += ` <div class="shopRightBottonNum"> <p onclick="increase(${i},${1})">添加购物车</p> </div>` } else if (data[i].num > 0) { str += ` <button class="reduce" onclick="increase(${i},${2})">-</button> <div class="Prices">${data[i].num}</div> <button class="add" onclick="increase(${i},${1})">+</button> ` strs += ` <div class="shops" > <div class="shopLeft"> <img src="${data[i].img}" alt="" /> </div> <div class="shopRight"> <div class="shopRighttop"> <p>${data[i].name}</p> </div> <div class="shopRightBotton"> <p class="prices">￥：${data[i].price}</p> <button class="price" id="redele" onclick="increase(${i},${2})">-</button> <div class="num">${data[i].num}</div> <button class="add" onclick="increase(${i},${1})">+</button> </div> </div> </div>` }; str += `</div> </div> </div> ` }; document.getElementsByClassName('sopws')[0].innerHTML = strs; // （存储在变量str中） // 找到HTML文档中第一个类名为sopws的元素，并将其内容设置为strs变量的值。 document.getElementsByClassName('shopw')[0].innerHTML = str; // （存储在变量str中） // 找到HTML文档中第一个类名为shopw的元素，并将其内容设置为str变量的值。 } //加入购物车++--事件 function increase(a, type) { //加减两个功能和在一起的函数3（形参，状态） // a用以接收渲染数据以方便用到 if (type == 1) { // 如果状态为1 data[a].num++; // 让其用户点击数据的数量++ } else if (type == 2) { //如果状态为2 if (data[a].num > 0) { //如果其用户点击数据的数量大于0 data[a].num--; // 让其用户点击数据的数量-- } } item(data); //调用渲染函数 calculate(data); //调用计算总数量和总价格的函数 //当计算总数量或总价格时可以调用计算总数量函数和总价格函数 }; function calculate(datas) { //计算总数量和总价格的函数 for (let i = 0; i < data.length; i++) { //遍历所有的数组 totalPrices += parseFloat((datas[i].price * datas[i].num)); //总价格+=单价*数量（所有的数量*）每个商品的总价（单价乘以数量） nums += parseInt(datas[i].num); } if (nums==0) { closesfy(); //调用购物车隐藏函数 }; //计算总价格和总数量时不用调用渲染函数 //有操作时就调用，没有改变时就不用调用； document.getElementsByClassName('TotalPrices')[0].innerHTML = totalPrices; // 找到HTML文档中第一个类名为TotalPrices的元素，并将其内容设置为totalPrices总价格变量的值。 document.getElementsByClassName('amount')[0].innerHTML = nums; // 找到HTML文档中第一个类名为amount的元素，并将其内容设置为nums总数量变量的值。 item(data); //必须要调用，不然清空购物车清空不了 }; //购物车开启 function shops() { //购物车显示函数 if (nums == 0) { // 如果总数量等于0时 hint.style.display = 'none'; // 购物车隐藏 nulls.style.display = 'none'; // 空div隐藏 }; for (let i = 0; i < data.length; i++) { // 用于遍历data数组 if (data[i].num > 0) { // 如果data数组的数量大于0时 hint.style.display = 'block'; //购物车显示 nulls.style.display = 'block'; //空div显示 } } }; //购物车关闭 function closesfy() { // 购物车关闭函数 hint.style.display = 'none'; //购物车隐藏 nulls.style.display = 'none'; // 空div隐藏 } //清空购物车函数 function empty() { for (let i = 0; i < data.length; i++) { //遍历数组 if (data[i].num == 0) { //数组的数量为0时 hint.style.display = null; // 购物车为空 nulls.style.display = null; // 空div为空 } else if (data[i].num > 0) { //如果数组大于0时 data[i].num = 0; //数组的值初始化0 hint.style.display = 'none'; //购物车隐藏 nulls.style.display = 'none'; // 空div为空 } } calculate(data); //调用计算总数量和总价格函数 item(data); //调用渲染函数 };
html+css?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>美团购物车</title> <style> /* 头部 */ * { margin: 0; padding: 0; } .left { width: 100%; height: 50px; top: 0; display: flex; background-color: #FFFFFF; } .left img { width: 5%; margin: 26px 11px; height: 40%; } .left input { width: 79%; height: 20px; line-height: 32px; text-align: center; font-size: 18px; border-radius: 15px; display: -webkit-box; -webkit-box-orient: vertical; margin-top: 25px; -webkit-line-clamp: 1; overflow: hidden; } /* 内容 */ .shopw { width: 100%; height: 2000px; } .shop { width: 100%; margin-top: 4%; height: 180px; display: flex; } .shops { width: 100%; height: 180px; display: flex; } .sopws { width: 100%; height: 150px; overflow-y: scroll; } .shopLeft { width: 45%; height: 150px; } .shopLefts { width: 45%; height: 150px; } .shopLefts img { width: 85%; padding: 10px; border-radius: 15px; height: 150px; } .shopLeft img { width: 95%; padding: 10px; border-radius: 15px; height: 150px; } .shopRight { width: 60%; height: 150px; padding: 2px; } .shopRighttop { width: 90%; margin-left: 4%; } .shopRighttop p { padding: 2px; display: -webkit-box; -webkit-box-orient: vertical; margin-top: 5px; -webkit-line-clamp: 2; overflow: hidden; } .shopRightBotton { /* width: 98%; */ margin-right: 15px; margin-top: 21%; display: flex; } .shopRightBotton p { width: 50%; color: #ff0000; margin-left: 1%; line-height: 35px; text-align: center; } .shopRightBottonNum { width: 75%; height: 35px; line-height: 35px; display: flex; text-align: center; } .cart { z-index: 99; } .reduce { width: 15%; height: 30px; } .shopRightBottonNum p { width: 70%; margin-left: 20%; color: #fff; background-color: #ffb300; text-align: center; } .Price { width: 15%; height: 30px; } .add { width: 15%; height: 30px; } .footer { display: flex; position: fixed; bottom: 0px; margin-top: 100px; background-color: #FFFFFF; width: 100%; height: 55px; } .footerLeft { width: 25%; position: flex; display: flex; height: 55px; } .footerLeft img { width: 70%; height: 45px; } .footerLeft div { width: 20%; line-height: 55px; height: 55px; } .footerRight { width: 80%; height: 55px; display: flex; text-align: center; background-color: #ffb300; } .unit{ display: flex; line-height: 55px; color: #ffffff; } .inTotal{ display: flex; margin-left: 25%; line-height: 55px; color: #ffffff; } .TotalPrices{ line-height: 55px; text-align: center; color: #ffffff; } /* .footerRight div{ width: 50%; line-height: 55px; text-align: center; color: #ff0000; } */ #hint { width: 100%; height: 200px; display: none; position: fixed; bottom: 55px; /* margin-bottom: 185px; */ justify-content: center; background-color: #fafafa; } #hints { width: 100%; height: 400px; display: none; background-color: #fafafa; } .clear { padding: 10px; height: 13px; display: flex; width: 100%; } .clear p { width: 25%; border-radius: 15px; background-color: #00fdfd; text-align: center; height: 20px; } .clearImg { margin-left: 65%; width: 5%; } .clearImgone { margin-left: 65%; width: 5%; } .clearImgone img { text-align: center; width: 50%; } #redele { width: 15%; height: 30px; } .nulls{ width: 100%; /* height: 260px; */ display: none; margin-bottom: 200px; } .shopw{ overflow-y: scroll; } </style> </head> <body> <!-- 顶层 --> <div class="left"> <img src="./img/左 左.png" alt=""> <input type="text" placeholder="请输入商品" /> <img src="./img/省略号.png" alt="" /> </div> <!-- 内容 --> <div class="shopw"> <!-- <div class="shop"> </div> --> </div> <!-- 底部 --> <div class="footer"> <div class="footerLeft" onclick="shops()"> <img src="./img/MBE风格常用图标-购物.png" alt="" /> <div class="amount">0</div> </div> <div class="footerRight"> <div class="inTotal">一共花费：</div> <p class="TotalPrices">100</p> <div class="unit">元</div> </div> </div> <div class="nulls"> </div> <!-- 提示 --> <div id="hint"> <div class="clear"> <p onclick="empty(1)">清空购物车</p> <div class="clearImgone" onclick="closesfy()"> <img src="./img/cha.png" alt="" /> </div> </div> <div class="sopws"> <div class="shops" > <div class="shopLeft"> <img src="${datas[i].img}" alt="" /> </div> <div class="shopRight"> <div class="shopRighttop"> <p class="numsfy">12546</p> </div> <div class="shopRightBotton"> <p>111</p> <button class="reduce" id="redele" onclick="increase(${i},${2})">-</button> <div class="Prices">0</div> <button class="add" onclick="increase()">+</button>` </div> </div> </div> </div> </div> <div id="hints"> </div> </body> <script src="./js/index.js"></script> <!-- 用以引用js文件 --> </html>