最近在苦思一個問題,我們使用的vue,react等框架,已經是前,後端分離 ,但是在原生js上,我卻很少能夠做到 頁面之間傳參,一直認為兩頁面是獨立存在的,跳轉開啟新頁,等於重新整理,但是框架能做到的事情,我們也能做得到,畢竟都是用的js實現的...

     //這是首頁index.html 寫的內容  ,而我們做的詳情頁跳轉就是基於Window.location.href="跳轉地址 + 自帶引數"  這種形式來實現的

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(function(){ var str=""; $.ajax({ type:'post', url:"https://route.showapi.com/213-1", data:{ showapi_sign:"b8d3847c26054907944815bc522019cf", showapi_appid:"40497", page:"1", keyword:"海闊天空" }, success:function(res){ Json(res); } }) }) function Json(res){ var res=res.showapi_res_body.pagebean.contentlist; console.log(res); for(var i=0; i<res.length; i++){ str="<li>"+res[i].songid+"</li>" $('body ul').append(str); }; var li =$("ul li"); li.click(function(){ var index =$(this).index(); console.log($(this).index()); window.location.href="tiao.html?id="+index+""; }) } </script>

 //這是我在tiao.html 頁面寫的東西 , 其中的函式 是用作正則獲取連結上的id ;

 最後 就可以實現列印我們傳過來的id值 ;

這時候我們就可以通過這個id ,請求不一樣的介面,來進行新聞詳情上的渲染了

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script>function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } var proId =getQueryString('id'); console.log(proId);
// $(function(){ // var str=""; // $.ajax({ // type:'get', // url:"https://route.showapi.com/213-1", // data:{ // showapi_sign:"b8d3847c26054907944815bc522019cf", // showapi_appid:"40497", // page:"1", // keyword:"海闊天空" // }, // success:function(res){ // Json(res); // } // }) // }) </script>