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. Hadoop出现错误：WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable，解决方案
			
    安装Hadoop的时候直接用的bin版本,根据教程安装好之后运行的时候发现出现了:WARN util.NativeCodeLoader: Unable to load native-hadoop li ...
    
			
    2. 
						
  2. Gitkraken系列-Gitkraken修改用户名
			
    修改用户名 为了方便项目中代码的管理,需要重新编辑用户名. 点击右上角的图像即可看到如下图 3‑1所示的下拉菜单,鼠标悬于Profile上,会出现一个Edit按钮. 图 3‑1 编辑个人信息 点击Ed ...
    
			
    3. 
						
  3. 初学LINUX版本的选择
			
    1.用于企业环境:建议使用商业版本,例如Red Hat的RHEL或者是Novell的SuSE都是很不错的选择!毕竟企业的环境强调的是永续的经营,你可不希望网管人员走了之后整个机房的主机都没有人管理吧! ...
    
			
    4. 
						
  4. [计算机网络-应用层] FTP协议
			
    文件传输协议:FTP 如下图所示:用户通过一个FTP用户代理与FTP交互.该用户首先提供远程主机的主机名,使本地主机的FTP客户机进程建立一个到远程主机FTP服务器进程的TCP连接.然后,该用户提供用 ...
    
			
    5. 
						
  5. 【ASP.NET Core】ASP.NET Core API 版本控制
			
    几天前,我和我的朋友们使用 ASP.NET Core 开发了一个API ,使用的是GET方式,将一些数据返回到客户端 APP.我们在前端进行了分页,意味着我们将所有数据发送给客户端,然后进行一些dat ...
    
			
    6. 
						
  6. C++中Set的使用
			
    /* #include <string> // 使用 string 类时须包含这个文件 #include <iostream> // 这个就加上去吧.c++的输入和输出. us ...
    
			
    7. 
						
  7. BZOJ2111：[ZJOI2010]排列计数——题解
			
    https://www.lydsy.com/JudgeOnline/problem.php?id=2111 https://www.luogu.org/problemnew/show/P2606#su ...
    
			
    8. 
						
  8. 【ST表】【模板】ST表
			
    Definition ST表是一种用于处理静态RMQ问题(无修改区间最值问题)的最快数据结构,书写方便使用简单效率便捷.其中其预处理复杂度为O(nlogn),查询复杂度为O(1).总时间复杂度为O(n ...
    
			
    9. 
						
  9. JQuery仿淘宝滚动加载图片
			
    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...
    
			
    10. 
						
  10. iOS AFNetworking 2.6.0框架导入报错解决方法
			
    最近手动导入AFNetworking 2.6.0框架时发现Xcode报如下3个错误: 1. Use of undeclared identifier ‘kSecFormatUnknown‘ 2. Us ...
    
			
    11.