promise 请求封装方法
promise把请求封装成一个方法,使用封装好的这个方法去请求json数据。
·
使用promise把请求封装成一个方法,使用封装好的这个方法去请求json数据。
做了一个简单的购物车添加商品~
效果图:
代码演示:
html代码段:
<div>
<h4>产品列表</h4>
<table border="0" id="box"></table>
<h4>我的购物车</h4>
<table id="cars" border="0"></table>
</div>
js代码段:
// 封装ajax Promise请求
function ajax(url, type, async = false, data) {
return new Promise((resolve, reject) => {
$.ajax({
url,
type,
async,
data,
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
})
}
ajax("goods.json","get", true).then((data) => {
let box = document.getElementById("box")
for (let i = 0; i < data.length; i++) {
let str = `
<tr>
<td>${data[i].name}</td>
<td><button type="button">添加</button></td>
</tr>`
box.innerHTML += str //渲染购物车
}
let btn = document.getElementsByTagName("button"); //获取添加按钮
let cars = []; //购物车数组
let shopping = document.getElementById("cars") //购物车id
let ind = 0; //购物车tr的id
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function() { //给按钮添加点击事件
let car = $(this).parent().prev().text() //获取需添加的产品
let index = cars.findIndex(item => item == car); //产品和购物车数据进行操作
if (index == -1) { //根据对比的结果进行操作
cars.push(car) //购物车没有此产品,需要添加进去,且显示页面
//拼接 给每一行添加一个id
let str = `
<tr id="row${ind}">
<td>${car}</td>
<td>1</td>
</tr>`
shopping.innerHTML += str //渲染购物车
ind++; //数量++
} else { //购物车有此产品,只需要数量+1即可
//根据index+row进行拼接获取添加的产品在购物车表格中的数据
let cols = document.getElementById("row" + index).cells; //cells获取到所有的表格
let number = parseInt(cols[1].innerHTML); //字符串转型
cols[1].innerHTML = ++number //数量++
}
}
}
}).catch((err) => {
console.log(err)
})
更多推荐
所有评论(0)