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>
注意点：
- 通过$.each遍历，可以在页面要跳转的模块上加上item.id，这个时候把鼠标放到对应的模块上，会显示出title.html?id=id,其中第二个id为根据后台拿到的数据库的数据，是动态变化的。
- 在$.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也不同，这个实现了，其他的都可以用这一个方法解决！
