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

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

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

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

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

技术：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <p>如果你浏览器的URL是：http://127.0.0.1:8020/web-demo/demodemo/data02.html?id=88&topId=66&artId=6868&findId=999</p>

     </body>

     <script type="text/javascript">

         //1.通过下面封装对方法，查询对应对参数

         var id = getQueryString("id");

         var topId = getQueryString("topId");

         var artId = getQueryString("artId");

         var findId = getQueryString("findId");

         //2.封装的一个函数对URL后面的参数进行查询，可以直接复制在项目中使用

         function getQueryString(name) {

             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

             var r = window.location.search.substr(1).match(reg);

             if(r != null) return unescape(r[2]);

             return '';

         };

         //3.在控制台打印对应对参数

         console.log(id); //

         console.log(topId); //

         console.log(artId); //

         console.log(findId); //

     </script>

 </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为你传递的参数。
参数带过去，我们可以通过下面的函数把它提取出来：
 function getQueryString(name) {

             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

             var r = window.location.search.substr(1).match(reg);

             if(r != null) return unescape(r[2]);

             return '';

         };
上面这个方法只能提前数字和字母，不能提起中文。在后续传递中文的过程中，无法把参数给提取出来。经过研究，可以使用另外一种方法，既可以提取中文也可以提取英文。

 getQueryStringZH: function() {

             var url = window.location.search; //获取url中"?"符后的字串

             var theRequest = new Object();

             if(url.indexOf("?") != -1) {

                 var str = url.substr(1);

                 strs = str.split("&");

                 for(var i = 0; i < strs.length; i++) {

                     //就是这句的问题

                     theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);

                     //之前用了unescape()

                     //才会出现乱码

                 }

             }

             return theRequest;

         },

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

var getRequest = common.getQueryStringZH();

var companyName = getRequest.companyName;


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


											
js_参数的get传输，从一个页面到另外一个页面。的更多相关文章
	

    
								
  1. 从上一个页面跳入新页面时，如何拿URL中的参数
		
    var url = document.URL; //获取当前页面的url var urlA = url.split('?');//以url中的问号进行分割; var goodscode = urlA[ ...
    
		
    2. 
						
  2. 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面
		
    在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...
    
		
    3. 
						
  3. 分享如何使用PHP将URL地址参数进行加密传输提高网站安全性
		
    大家在使用PHP进行GET或POST提交数据时,经常会在URL带着参数进行传递,比如www.mdaima.com/get.php?id=1&page=5,这里就将id编号和page页码进行了参 ...
    
		
    4. 
						
  4. android一个app打开另一个app的指定页面
		
    一个app打开另一个app的指定页面方法 有以下几种 1.通过包名.类名 2.通过intent的 action 3.通过Url 方案1. ComponentName componentName = n ...
    
		
    5. 
						
  5. 一个jsp页面引入另一个jsp页面的三种方式 及静态引入和动态引入的区别
		
    转载下, 转载自:http://blog.csdn.net/fn_2015/article/details/70311495 1.第一种:jstl  import <c:import url=& ...
    
		
    6. 
						
  6. vue:解决使用param传参后，再次刷新页面会新增一个原有的tab
		
    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...
    
		
    7. 
						
  7. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
		
    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
    
		
    8. 
						
  8. Flutter学习六之实现一个带筛选的列表页面
		
    上期实现了一个网络轮播图的效果,自定义了一个轮播图组件,继承自StatefulWidget,我们知道Flutter中并没有像Android中activity的概念.页面见的跳转是通过路由从一个全屏组件 ...
    
		
    9. 
						
  9. C# 复制PDF页面到另一个PDF文档
		
    C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux系统的性能测试
			
    性能测试:CPU内存,硬盘IO读写,带宽速度,UnixBench 一.CPU物理个数.内核.超线程.多核心 1.登录Terminal,执行:cat /proc/cpuinfo,就会显示出主机的CPU详 ...
    
			
    2. 
						
  2. 【bzoj2591】[Usaco 2012 Feb]Nearby Cows  树形dp
			
    题目描述 Farmer John has noticed that his cows often move between nearby fields. Taking this into accoun ...
    
			
    3. 
						
  3. 【bzoj3772】精神污染  STL+LCA+主席树
			
    题目描述 兵库县位于日本列岛的中央位置,北临日本海,南面濑户内海直通太平洋,中央部位是森林和山地,与拥有关西机场的大阪府比邻而居,是关西地区面积最大的县,是集经济和文化于一体的一大地区,是日本西部门户 ...
    
			
    4. 
						
  4. Linux查看PCIe版本及速率
			
    Linux查看PCIe版本及速率 PCIE有四种不同的规格,通过下图来了解下PCIE的其中2种规格 查看主板上的PCI插槽 # dmidecode | grep --color "PCI&q ...
    
			
    5. 
						
  5. [洛谷P3950]部落冲突
			
    题目大意:给你一棵树,有$3$个操作: $Q\;p\;q:$询问$p,q$是否连通 $C\;p\;q:$把$p->q$这条边割断 $U\;x:$恢复第$x$次操作二 题解:可以在割断时把这条边赋 ...
    
			
    6. 
						
  6. 三个月死磕Python是种什么样的体验？
			
    3个月的死磕Python后,参加「 楼+ Python实战 · 第4期 」的学员们感想如何?下面带来他们的真实评价. 作为实验楼的网红课程——「 楼+ Python实战 」已经走过了第四期,经过了三个 ...
    
			
    7. 
						
  7. 【BZOJ2648】SJY摆棋子（KD-Tree）
			
    [BZOJ2648]SJY摆棋子(KD-Tree) 题面 BZOJ Description 这天,SJY显得无聊.在家自己玩.在一个棋盘上,有N个黑色棋子.他每次要么放到棋盘上一个黑色棋子,要么放上一 ...
    
			
    8. 
						
  8. AtCoder Regular Contest 081 E - Don't Be a Subsequence(字符串DP)
			
    引用自:onion_cyc 字符串DP一直不是强项...以后没思路的题就想DP和网络流23333333 f[i]表示从i开始的后缀非子序列的最短长度  pos[i][j]表示从i开始的j字符最早出现位 ...
    
			
    9. 
						
  9. 【贪心/DP/单调队列】【CF1029B】Creating the Contest
			
    Description 给你一个单调不下降的长度为n的序列,请你找出一个最长的子序列,满足找出的子序列中,\(A_i<=A_{i-1}~\times~2\),其中i为下标,A为找出的子序列.对于 ...
    
			
    10. 
						
  10. Android JUnit test
			
    Android单元测试步骤 1.修改AndroidManifest.xml文件. 添加instrumentation节点.其中name是固定值,targetPackage为需要测试的类所在的包.如:  ...
    
			
    11.