从URL取值传给后端

从URL传值给后端

java 复制代码
http://127.0.0.1:8080/blog_content.html?id=8

点击浏览文章详情,跳转至详情页面

从 url 中拿出文章 id,传给后端

  • 首先拿到url
  • 然后判断是否有值,从问号后面取值
  • params.split('&') 以 & 作为分割
  • 然后遍历字符数组 paramArr[i].split("="),又用 =等号 分割键和值
  • 判断 key 和传过来的 key 是否一样,一样就返回该 key 对应的 value 值
java 复制代码
     function getURLParam(key){
                var params = location.search;
                if(params.indexOf("?") >=0){//返回问号在字符串中第一次出现的位置,大于等于0说明问号存在
                    params = params.substring(params.indexOf("?")+1);//截取问号后面的参数
                    var paramArr = params.split('&');//使用&作为分割符
                    for(var i=0; i<paramArr.length;i++){
                        var namevalues = paramArr[i].split("=");
                        if(namevalues[0]==key){
                            return namevalues[1];
                        }
                    }

                }else{
                    return "";
                }
            }
java 复制代码
 function getArtDetail(){
                //从 url 中获取到文章的id
                var aid = getURLParam("id");
                if(aid != null && aid >0){

                //访问后端,更新访问量
                    jQuery.ajax({
                         url:"/art/setrcount",
                         type:"POST",
                         data:{"aid":aid},
                         success:function(result) {   
                        }
                    });
                    //访问后端查询文章详情
                    jQuery.ajax({
                        url:"/art/detail",
                        type:"POST",
                        data:{"aid":aid},
                        success:function(result){
                            if(result.code ==200 && result.data != null){
                                var art = result.data;
                                jQuery("#title").text(art.title);
                                jQuery("#data").text(art.createtime);
                                jQuery("#rcount").text(art.rcount);
                                editormd = editormd.markdownToHTML("editorDiv",{
                                    markdown:art.content
                                });
                                myInfo(art.uid);
                            }
                        }
                    });

                    }
            }    
            getArtDetail();//调用这个方法
   

因为这个方法经常使用,因此将他封装成一个工具方法,使用的时候调用即可


相关推荐
lxh01131 天前
二叉树中的最大路径和
前端·算法·js
心.c1 天前
初步了解Next.js
开发语言·前端·javascript·js
苏打水com4 天前
第十篇:Day28-30 工程化优化与部署——从“能跑”到“好用”(对标职场“项目上线”需求)
前端·css·vue·html·js
RollingPin5 天前
React Native与Flutter的对比
android·flutter·react native·ios·js·移动端·跨平台开发
我命由我123457 天前
微信小程序 - 页面返回并传递数据(使用事件通道、操作页面栈)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
小曹要微笑7 天前
HTTP与WebSocket协议深度解析
websocket·网络协议·http·js
酒尘&8 天前
JS数组不止Array!索引集合类全面解析
开发语言·前端·javascript·学习·js
我命由我1234510 天前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
吳所畏惧10 天前
少走弯路:uniapp里将h5链接打包为apk,并设置顶/底部安全区域自动填充显示,阻止webview默认全屏化
android·安全·uni-app·json·html5·webview·js
by__csdn10 天前
ES6新特性全攻略:JavaScript的现代革命
开发语言·前端·javascript·typescript·ecmascript·es6·js