【另一种思路|非优化】记一次对黑马旅游网分页数据展示前台代码的另一种思路

最新推荐文章于 2022-10-04 22:35:27 发布

壹加柒

最新推荐文章于 2022-10-04 22:35:27 发布

阅读量276

点赞数

分类专栏： JEE 文章标签： java javascript ajax

本文链接：https://blog.csdn.net/yu1300000363/article/details/105257656

版权

JEE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这次并没有实现优化，反而ajax的异步并没有好好利用，仅提供一种思路。学习到了一些其他知识，便记录下。

1. 先展示下标准原代码：

<script>
        $(function () {
            //拿到当前URL中的get请求部分?及其后面的请求参数
            var search = location.search;
            //切割字符串，拿到id
            var Mid = search.split('=')[1];
            load(Mid);
        });
        function load(Mid, currentPage) {

            //发送ajax请求，请求route、pageQuery，传递cid
            $.get("/route/pageQuery", {cid:Mid, currentPage:currentPage}, function (pb) {
                $("#totalPage").html(pb.totalPage);
                $("#totalCount").html(pb.totalCount);

                //解析pageBean数据，展示到页面
                //设置页码
                var lists = "";
                var firstPage = '<li><a href="">首页</a></li>';
                var previousPage = '<li class="threeword"><a href="#">上一页</a></li>';
                lists += firstPage;
                lists += previousPage;

                for (var i = 1; i <= pb.totalPage; i++) {
                    var list = ' <li><a href="javascript:load('+Mid + "," +i+')">'+i+'</a></li>';
                    lists += list;
                }

                var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
                var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                lists += nextPage;
                lists += lastPage;

                //将页码展示到页面
                $("#pageNum").html(lists);

                //列表的数据展示页面上
                var route_lists = "";
                for (var i = 0; i < pb.list.length ; i++) {
                    //获取{rid:1, rname:xxx}
                    var route = pb.list[i];
                    var list = '<li>\n' +
        '                            <div class="img"><img src="' + route.rimage  + '" style="width: 299px;"></div>\n' +
        '                            <div class="text1">\n' +
        '                                <p>' + route.rname + '</p>\n' +
        '                                <br/>\n' +
        '                                <p>' + route.routeIntroduce + '</p>\n' +
        '                            </div>\n' +
        '                            <div class="price">\n' +
        '                                <p class="price_num">\n' +
        '                                    <span>&yen;</span>\n' +
        '                                    <span>' + route.price + '</span>\n' +
        '                                    <span>起</span>\n' +
        '                                </p>\n' +
        '                                <p><a href="route_detail.html">查看详情</a></p>\n' +
        '                            </div>\n' +
        '                        </li>';
                    route_lists += list;
                }
                $("#route").html(route_lists);

            });
        }
</script>

2. 我的另一种思路，应该比较容易理解

<script>
        $(function () {
            //拿到当前URL中的get请求部分?及其后面的请求参数
            var search = location.search;
            //切割字符串，拿到id
            var Mid = search.split('=')[1];
            var reg = /[^0-9]/gi;  //正则表达式，除数字之外的字符串
            var id = Mid.replace(reg,'');  //相当于获得数字，将除数字之外的字符串去除
            var currentPage = search.split('=')[2];  //获得第二个=后面的参数
            console.log(id);
            console.log(currentPage);
            //发送ajax请求，请求route、pageQuery，传递cid
            $.get("/route/pageQuery", {cid:id, currentPage:currentPage}, function (pb) {
                $("#totalPage").html(pb.totalPage);
                $("#totalCount").html(pb.totalCount);

                //解析pageBean数据，展示到页面
                //设置页码
                var lists = "";
                var firstPage = '<li><a href="">首页</a></li>';
                var previousPage = '<li class="threeword"><a href="#">上一页</a></li>';
                lists += firstPage;
                lists += previousPage;

                for (var i = 1; i <= pb.totalPage; i++) {
                    var list = ' <li><a href="/route_list.html?cid=' + id + '&currentPage=' + i +'">'+i+'</a></li>';
                    lists += list;
                }

                var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
                var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                lists += nextPage;
                lists += lastPage;

                //将页码展示到页面
                $("#pageNum").html(lists);

                //列表的数据展示页面上
                var route_lists = "";
                for (var i = 0; i < pb.list.length ; i++) {
                    //获取{rid:1, rname:xxx}
                    var route = pb.list[i];
                    var list = '<li>\n' +
        '                            <div class="img"><img src="' + route.rimage  + '" style="width: 299px;"></div>\n' +
        '                            <div class="text1">\n' +
        '                                <p>' + route.rname + '</p>\n' +
        '                                <br/>\n' +
        '                                <p>' + route.routeIntroduce + '</p>\n' +
        '                            </div>\n' +
        '                            <div class="price">\n' +
        '                                <p class="price_num">\n' +
        '                                    <span>&yen;</span>\n' +
        '                                    <span>' + route.price + '</span>\n' +
        '                                    <span>起</span>\n' +
        '                                </p>\n' +
        '                                <p><a href="route_detail.html">查看详情</a></p>\n' +
        '                            </div>\n' +
        '                        </li>';
                    route_lists += list;
                }
                $("#route").html(route_lists);

            })

        });
</script>

分析：

在这里插入图片描述

1. 这里的目的是实现真正的分页效果，在前半部分只实现了获取旅游路线cid进行分类。实现分页的效果，前台当点击页目标签时，应当给后端传递currentPage参数。

在这里插入图片描述
2. 我当时想的就是还是分离URL中GET请求的参数。如上图，在除了首次进入详细旅游路线后的页面，点击分页标签，URL中都会有currentPage的值。这样就得想办法从URL中既要分离cid参数，又要分离currentPage参数，那么如何实现呢？
在这里插入图片描述
3. 如上图，按照前面分离URL获得cid的值的思路，首先查阅相关资料，看看split()方法的使用规则。

string.split(separator,limit)
第一个参数可选。字符串或正则表达式，从该参数指定的地方分割 string Object。
第二个参数可选。该参数可指定返回的数组的最大长度。

在这里插入图片描述

4. 我们先看一下如上图代码去掉正则表达式后，返回值的参数。发现控制台输出的参数为在第一个等号和第二个等号之间的参数，由此弄清楚了split()方法的用法。现在要做的再分离参数，把参数中的数字部分提取出来。

在这里插入图片描述

5. 由于cid必然是数字，所以编写正则表达式，只要查询所有非数字，再用replace()方法，把非数字部分替换为空字符串，这样就实现里分离参数。

var reg = /[^0-9]/gi;  //正则表达式，除数字之外的字符串
var id = Mid.replace(reg,'');  //相当于获得数字，将除数字之外的字符串去除

比较：

原代码在分页的时候，继续使用的是ajax请求。在首次加载页面时，调用load()方法，此时仅传递cid参数。当点击分页标签时，再次调用load()方法，此时传递cid以及currentPage参数。由于ajax请求实在load方法体内的，所以很好地再实现以分页的异步请求。

总结：

自己方法有一个致命的缺点就是用了在ajax但却以同步的方式在进行分页。没有实现ajax的异步功能。
进一步知道如何使用正则表达式去精确分离参数。
意外发现在JavaScript中是没有重载的，如上述原代码，在定义load()方法的时候，设置了两个参数，但是，只传递一个参数也可以正常调用load()方法。这里的规则是：

例如在同一文件下的JavaScript代码中定义方法
load(x)
load(x , y)
记住没有重载，后出现的方法才有效，即load(x, y)有效
如果调用方法时
load(1)
那么1值传递给x，而y定义为undefined
若调用方法时
load(1,2,3)
那么调用方法x=1，y=2，舍弃三，不会报错