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. YaoLingJump开发者日志（三）
			
      开始第二关的筹建.   增加了地刺和会移动的砖块.   每次增加一个新东西都要改好多代码,好累吖.   把第二关搞出来后发现太难了,强行调整难度.   修复了一些bug.   调整难度后还是发现太 ...
    
			
    2. 
						
  2. PAT 甲级 1032 Sharing
			
    https://pintia.cn/problem-sets/994805342720868352/problems/994805460652113920 To store English words ...
    
			
    3. 
						
  3. 从实战角度浅析snmp
			
    Snmp  Simple Network Management Protocol Snmp最终是为五花八门的网管软件服务的,由于接触的网管软件较少,所以对snmp的理解至今还仅限于初级配置阶段.以下言 ...
    
			
    4. 
						
  4. canvas drawImage 不显示
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    5. 
						
  5. Qt编码设置
			
    1.Qt Creator -> 工具 -> 选项 -> 环境 - >概要 -> 语言    Qt Creator本身界面的语言选择,与cpp文件编码无关,与可执行文件显示 ...
    
			
    6. 
						
  6. 【bzoj1370】[Baltic2003]Gang团伙  并查集
			
    题目描述 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: 1. 我朋友的朋友是我的朋友: 2. 我敌人的敌人是我的朋友: 所有是朋友的人组成一个团伙.告诉你关于这n个人的m条信息, ...
    
			
    7. 
						
  7. BZOJ4770 图样（概率期望+动态规划）
			
    考虑求出所有MST的权值和再除以方案数,方案数显然是2mn. 按位考虑,显然应该让MST里的边高位尽量为0.那么根据最高位是0还是1将点集划分成两部分,整张图的MST就是由两部分各自的MST之间连一条 ...
    
			
    8. 
						
  8. 【刷题】BZOJ 1003 [ZJOI2006]物流运输
			
    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...
    
			
    9. 
						
  9. [SCOI2008]天平 差分约束
			
    ---题面--- 题解: 差分约束学得实在是太烂了,,,,QAQ 这里先记下: a - b >= x  ---> a >= b + x     ---->        b - ...
    
			
    10. 
						
  10. Python 编程实战提高测试工作效率实例之svn 文件管理
			
    #coding=utf-8 ''' Created on 2016年8月22日 @author:Tom Gao ''' importre importos importtime "" ...
    
			
    11.