原生html页面带参数跳转，下一个页面根据不同参数渲染不同内容，详细介绍

比如说有个公园的列表页面，每个公园有固定的id，选择不同的公园 id 会通过 url 传递到下一个模板html界面，模板html通过id值向服务器发送请求，从而渲染不同的界面

 

<!--  list.html -->

        <div zone_id="6" class="industry-cat1 btn" style="">
            <div class="industry-cat-big" style="background: transparent;">
                <i class="blcfont blcdc-icon-guojiaji" style="color: #ffe91e;font-size: 22px;"></i>
            </div>
            <span>秦淮区</span>
        </div>
        <div class="industry-cat1 btn" zone_id="5">
            <div class="industry-cat" style="background-color:#8461FF;"></div>
            <div class="industry-cat-right">雨花区</div>
        </div>
        <div class="industry-cat1 btn" zone_id="20">
            <div class="industry-cat" style="background-color:#8461FF;"></div>
            <div class="industry-cat-right">鼓楼区</div>
        </div>
        <div class="industry-cat1 btn" zone_id="4">
            <div class="industry-cat" style="background-color:#8461FF;"></div>
            <div class="industry-cat-right">江宁区</div>
        </div>

<script>
    $(document).ready(function () {
        $(".btn").click(function () {
            let id = $(this).attr("zone_id")
            location.href = `./park_detail.html?zone_id=${id}`
        });
    });
</script>

<!-- detail.html    -->

 <script>
      
    $(document).ready(function(){
        var getUrlParameter = function(){
            //  获取url参数
            function getQueryString() {
                var parameter = location.search.substr(1); // 获取url中"?"符后的字串
                var parameterJson = {}; // 保存参数数据的对象
                var parameterArr = parameter.length ? parameter.split("&") : []; // 取得每一个参数项,
                var item = null;
                var len =parameterArr.length;

                for (var i = 0; i < len; i++) {//这里写代码片
                    item =parameterArr[i].split("=");
                    var name = decodeURIComponent(item[0]);// URI 进行解码。
                    var value = decodeURIComponent(item[1]);// URI 进行解码。
                    if (name) {
                        parameterJson[name] = value;
                    }
                }
                return parameterJson;
            }
            return {
                getQueryString:getQueryString
            }
        }();
        var urlString = getUrlParameter.getQueryString();
        // console.log(urlString["zone_id"])
        
        var id = urlString["zone_id"];
        V_APP.network.post("/zs-service/getZoneById.do", {_id:id}, 1500,function (result) {
            console.log(result.data.info);
            var info = result.data.info;
            $("#park_introdue_text").text(info._desc);
            $("#condition_text").html(info.entry_desc);
        });

        V_APP.network.post("/zs-service/searchCompany.do", {zone_id: id, page: 1, size: 100},1500, function (result) {
            console.log(result.data.datalist);
            var datalist = result.data.datalist;
            var html = template('tpl', {target: datalist});
            var company_list = document.getElementById('company_list');
            company_list.innerHTML = html;

        });
    })
</script>

一般来说都会将  getQueryString 单独封装成一个方法，使用的时候调用。 这样代码就看着简洁。