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. Python2爬虫获取的数据存储到MySQL中时报错"Incorrect string value: '\\xE6\\x96\\xB0\\xE9\\x97\\xBB' for column 'new' at row 1"的解决办法
			
    由于一直使用python3进行编码,在使用Python2时,将爬虫数据连接数据库进行存储时,出现如上的报错,经查资料 是数据库编码问题. 如下转自:http://www.cnblogs.com/liu ...
    
			
    2. 
						
  2. Spring事务管理Transaction
			
    Spring提供了许多内置事务管理器实现: DataSourceTransactionManager:位于org.springframework.jdbc.datasource包中,数据源事务管理器, ...
    
			
    3. 
						
  3. 第68天：原型prototype方法
			
    一.原型prototype方法声明 构造函数有一个prototype属性,指向实例对象的原型对象.通过同一个构造函数实例化的多个对象具有相同的原型对象.经常使用原型对象来实现继承 <!DOCTY ...
    
			
    4. 
						
  4. BZOJ 2208 连通数(强连通分量)
			
    先缩点,对于缩完点后的DAG,可以直接在每个scc dfs一次就可以求出终点是这个scc的点的点对个数. # include <cstdio> # include <cstring& ...
    
			
    5. 
						
  5. BZOJ 1293 生日礼物(尺取法)
			
    把坐标离散化之后就是很普通的尺取法啦. # include <cstdio> # include <cstring> # include <cstdlib> # i ...
    
			
    6. 
						
  6. 【bzoj4922】[Lydsy六月月赛]Karp-de-Chant Number  贪心+背包dp
			
    题目描述 给出 $n$ 个括号序列,从中选出任意个并将它们按照任意顺序连接起来,求以这种方式得到匹配括号序列的最大长度. 输入 第一行包含一个正整数n(1<=n<=300),表示括号序列的 ...
    
			
    7. 
						
  7. Flask的第一个应用
			
    Flask 是一个 Python 实现的 Web 开发微框架,微框架中的“微”意味着 Flask 旨在保持核心简单而易于扩展. 与Django功能上比较: Django:中间件,路由系统,视图(CBV ...
    
			
    8. 
						
  8. kafka搭建笔记
			
    环境CentOS7.0,JDK1.8 一.下载安装 在kafka官网 http://kafka.apache.org/downloads下载到最新的kafka安装包 下载 2.0.0 release, ...
    
			
    9. 
						
  9. 【HUD-5790】Prefix （主席树+tire）
			
    似乎是归队赛的最后一道题. 由于当时以为是公共字串所以没写555555,其实是求公共前缀. 做法是建立tire,把tire上的点编号看成是值,查询第l到第r个字符串的区间内不重复的值的个数.建立主席树 ...
    
			
    10. 
						
  10. 51NOD 1594：Gcd and Phi——题解
			
    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1594 参考及详细推导:http://www.cnblogs.com/ri ...
    
			
    11.