ajax做列表,详情页接受参数渲染页面

最新推荐文章于 2025-07-28 00:00:26 发布

原创最新推荐文章于 2025-07-28 00:00:26 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

Html5

8 篇文章

订阅专栏

本文探讨如何在原生JavaScript中实现类似Vue和React框架的页面间参数传递，通过修改`Window.location.href`添加参数，并在详情页使用正则表达式捕获ID，进而根据ID请求数据并动态渲染页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在苦思一个问题,我们使用的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>