2019-05-28 Ready-one 关于jQuery的aj
关于jQuery的ajax请求回数据，通过分类渲染列表，并且点击每个列表渲染对应的详情!
渲染数据页面的js----------------------------------------------------------------------------------------------------------------
/* 请求数据封装=================== */
/* 获取封装 */
function jjax(url, success) { //url 请求的地址 success请求成功的回调函数
$.ajax({
type: "GET", //GET方式
url: url,
success: success
})
}
/* 渲染封装 */
function jaxos(sst, attr, da) { //sst 自定义的名字(为了后面分类渲染不同内容) attr 数据渲染的地方 da数据
if (da.title == sst) { //判断获取到的每条数据的title是否与自己定义的名字相同（只渲染title相同的数据）
attr.append(`
<div class="col-md-3 col-sm-3">
<a href="indormation.html?id=${da.id}" target="_blank">
<div>
<img src="${da.url}" alt="">
</div>
<p>${da.value}</p>
<p>${da.money}</p>
<button>立即购买</button></a>
</div>
`)
}
}
/* <a href="indormation.html?id=${da.id}" target="_blank"> </a>
为了点击进入详情页做准备在地址后通过？拼接一个id=${da.id}每条数据的id（id是自己在数据中自己义的）
target="_blank" 在新页面打开，不会覆盖原来页面
*/
jjax("https://www.easy-mock.com/mock/5cd8e87efc977431969b5dd2/books/all", function (msg) {
let data = msg.data.all //请求到的所有数据
for (let i = 0; i < data.length; i++) { //遍历数据并分类渲染
jaxos("送母亲", $("#home .row"), data[i])
jaxos("送爱人", $("#profile .row"), data[i])
jaxos("送朋友", $("#messages .row"), data[i])
jaxos("商务", $("#settings .row"), data[i])
jaxos("婚庆", $("#settingss .row"), data[i])
}
})
点击详情的js------------------------------------------------------------------------------------------------------------
let paid = location.search.substr(4) /* 获取到当前页面？开始后面的参数 并截取到第4位 */
$.ajax({
type: "GET",
url: "https://www.easy-mock.com/mock/5cd8e87efc977431969b5dd2/books/all",
success: function (msg) {
let info = msg.data.all
for (let i = 0; i < info.length; i++) {
if (paid == info[i].id) {
/* 通过ajax请求数据 判断截取到的id是否与请求会的数据id是否相同，相同就渲染对应页面
因为在上个页面拼接了id等于获取到每条数据的id，所以跳转回自动拼接对应的id，这是就执行本页面的js，判断是否与请求的数据id是否匹配，
如果匹配就渲染
*/
$(".box").append(`
<div>
<img src="${info[i].url}" alt="">
</div>
<p>${info[i].value}</p>
<p>${info[i].money}</p>
</div>
`)
}
}
}
})
