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>

                              `)

                    }

                }

            }

        })

因为自己做是用https://www.easy-mock.com/Easy Mock做的假数据，所以请求同一地址。

对地址的处理方式还有好多种，现在自己只弄了一个id，只操作一个数据，如果后面拼接的东西多可以通过正则来进行操作。