html 页面如何获得url中的参数

html 页面如何获得url中的参数

前言：

在做一个demo，想要从index.html跳转到详情页(title.html)时，当鼠标放到index.html页面上要跳转的模块时，左下角会显示title.html?id=id,其中第二个id为根据后台拿到的数据库的数据，是动态变化的。

当点击模块跳转时，详情页（title.html）里的findById？id=id，第二个Id是index,html传过来的id，也是动态变化的，这样拿到动态变化的id，我们就可以用$.ajax随便拿到详情页里后台数据库的数据了

只需要加入下边的这行代码！

<script>
						var searchURL = window.location.search;
						searchURL = searchURL.substring(1, searchURL.length);
						var targetPageId = searchURL.split("&")[0].split("=")[1];
						alert(targetPageId);
</script>

放出部分代码供参考。

index.html:部分代码

<script type="text/javascript">
            var page = 1;
            var tp = 0;
             
            $(function(){
                showData();
                
            });
             
            function upPage(){
                if(page>1){
                    page--;
                    showData();
                }
                 
            }
             
            function downPage(){
                if(page<tp){
                    page++;
                    showData();
                }
                 
            }
            

    function showData() {
            $.ajax({
                url: ctx + "/kaitao/query?page="+page, //json文件位置
                type: "GET", //请求方式为get
                //  dataType: "json", //返回数据格式为json                  
                //contentType: "application/json; charset=utf-8",				
                success: function (data) { //请求成功完成后要执行的方法 
                    var rel = data.content;                
		            tp = data.totalPages;
                    // console.log(tp);
                    var html = "";
                    $.each(rel,function (i, item) { //这里的函数参数是键值对的形式，i代表键名，item代表值                                                                  
                        html += ' <li> ';
                        html += ' <div class="taobao-article-item">';
                        html += ' <a class="article-item-imgbox" href="title.html?id=' + item.id + '"  target="_blank" rel="nofollow" style="max-height: 150px">';
                        html += ' <img src="img/' + item.fileName + '" width="200" height="150"></a>';
                        html += ' <div class="article-item-right">';
                        html += ' <a class="article-item-content" href="title.html?id=' + item.id + '" target="_blank" rel="nofollow">';
                        html += ' <h5>' + item.title + '</h5><p>' + item.content + '</p></a>';
                        html += ' <div class="article-item-info">';
                        html += ' <img src="static/picture/noavatar.jpg">';
                        html += ' <i class="article-item-username">' + item.name + '</i>';
                        html += ' <a href="/zhuangxiujingyan" class="article-item-category">' + item.type + '</a>';
                        html += ' <i class="article-item-count">' + item.reader + '</i>';
                        html += ' <span class="article-item-time">2020-12-17 14:56:55</span> </div></div></div></li></ul>';
                        
                        
                    });
                    $(".taobao-article-ul").html(html);

                    
                }
            });
        }
    </script>

注意点：

1. 通过$.each遍历，可以在页面要跳转的模块上加上item.id，这个时候把鼠标放到对应的模块上，会显示出title.html?id=id,其中第二个id为根据后台拿到的数据库的数据，是动态变化的。
2. 在$.ajax里有一个ctx，这是我自己封装的域名，因为每次要写要改域名时，这么多页面改太麻烦。做法也很简单，直接用封装一个js文件，里边写一个var ctx = 'http://localhost:8888'; 然后给每个页面引入这个js文件就可以

title.html(详情页的部分代码):

<meta charset="utf-8">
		<script src="js/urls.js"></script>
		<script src="js/jquery.js"></script>
		<script>
			var searchURL = window.location.search;
			searchURL = searchURL.substring(1, searchURL.length);
			var targetPageId = searchURL.split("&")[0].split("=")[1];
			// alert(targetPageId);
		</script>
		<script>
										
			$.ajax({
				url: ctx + '/kaitao/findById?id='+targetPageId,
				success: function (data) {
					// alert(1)
					// console.log(data);
					var html = ""; 							
					html += ""+data.title+"";
					$('#tt2').html(html);
				}
			});
		
		</script>

这里我让title标签里的内容，根据从index.html点的模块不同，显示的title也不同，这个实现了，其他的都可以用这一个方法解决！