js_参数的get传输，从一个页面到另外一个页面。

2017年10月31日，今天是万圣节，欢乐谷搞事情。

刚接触前端那会是分不清，前端和后台的，后台的数据如何传输到前端的。

现在用的还是Jquery的ajax请求后台数据到前端页面的，需要学习的地方还有很多，任重而道远也。

前后端分离，你是如何定义的呢？我现在公司现在用的php后台语言，现在逐步转型到Java，在此记录一点点变化，用作后面追忆

岁月的时候，可以作为回忆的印记。

技术：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10         <p>如果你浏览器的URL是：http://127.0.0.1:8020/web-demo/demodemo/data02.html?id=88&topId=66&artId=6868&findId=999</p>
11     </body>
12     <script type="text/javascript">
13         //1.通过下面封装对方法，查询对应对参数
14         var id = getQueryString("id");
15         var topId = getQueryString("topId");
16         var artId = getQueryString("artId");
17         var findId = getQueryString("findId");
18         //2.封装的一个函数对URL后面的参数进行查询，可以直接复制在项目中使用
19         function getQueryString(name) {
20             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
21             var r = window.location.search.substr(1).match(reg);
22             if(r != null) return unescape(r[2]);
23             return '';
24         };
25         //3.在控制台打印对应对参数
26         console.log(id); //88
27         console.log(topId); //66
28         console.log(artId); //6868
29         console.log(findId); //99
30     </script>
31 
32 </html>

我们从一个页面到另外一个页面的时候，有时候需要带一个参数过去，加以区分，这个时候就需要用到URL后面把参数带过去。

http://127.0.0.1:8020/web-demo/demodemo/data02.html?id=88&topId=66&artId=6868&findId=999
例如上面这个链接，我们只需要在链接最后通过?xxx=&xxx=&xxx=这样的方式把参数通过URL传递到另外一个页面，注意?xxx=只能只能出现一次，后面的参数我们通过&xxx=传递；
其中xxx为你传递的参数。
参数带过去，我们可以通过下面的函数把它提取出来：
1 function getQueryString(name) {
2             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
3             var r = window.location.search.substr(1).match(reg);
4             if(r != null) return unescape(r[2]);
5             return '';
6         };
上面这个方法只能提前数字和字母，不能提起中文。在后续传递中文的过程中，无法把参数给提取出来。经过研究，可以使用另外一种方法，既可以提取中文也可以提取英文。

 1 getQueryStringZH: function() {
 2             var url = window.location.search; //获取url中"?"符后的字串   
 3             var theRequest = new Object();
 4             if(url.indexOf("?") != -1) {
 5                 var str = url.substr(1);
 6                 strs = str.split("&");
 7                 for(var i = 0; i < strs.length; i++) {
 8                     //就是这句的问题
 9                     theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
10                     //之前用了unescape()
11                     //才会出现乱码  
12                 }
13             }
14             return theRequest;
15         },

注意你提起出来的是一个对象，需要通过提起对象的参数而获得参数。

var getRequest = common.getQueryStringZH();

var companyName = getRequest.companyName;

 



然后你就可以在文档中，随意使用了。

 

 




posted @ 2017-10-31 19:26  幽谷兰花  阅读(1999)  评论(0)  编辑  收藏  举报