首页 > Web开发 > 详细

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

时间:2021-01-14 11:27:00      阅读:0      评论:0      收藏:0      [点我收藏+]

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也不同,这个实现了,其他的都可以用这一个方法解决!

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

原文:https://www.cnblogs.com/XING-ZHI-JI-DA-XUE/p/14275891.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号