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. SFTPHelper
			
    public class SFTPHelper { #region 字段或属性 private readonly SftpClient _sftp; /// <summary> /// S ...
    
			
    2. 
						
  2. [C/C++] 字符串错题集
			
    1. 答案:A 这里考查转义字符,注意 \\ 表示字符 \\123表示字符 {\t 表示制表符这些都是一个字符. 2. 答案C 先不看有没有重复的,共5个字母,有5×4×3×2×1 = 120种组合. ...
    
			
    3. 
						
  3. RT-thread内核之事件
			
    一.事件控制块:在include/rtdef.h中 #ifdef RT_USING_EVENT /** * flag defintions in event */ #define RT_EVENT_F ...
    
			
    4. 
						
  4. hdu2295-Radar
			
    有n个城市,\(m\)个雷达,\(k\)个操作员,每个操作员只能操作一个雷达.每个雷达的覆盖范围是一个以雷达坐标为中心的圆,所有雷达的覆盖半径是相同的. 现在给出这\(n\)个城市,\(m\)个雷达的 ...
    
			
    5. 
						
  5. 【题解】SDOI2017树点涂色
			
    LCT强强!以前总是觉得LCT非常的难懂(当然现在也是的),但实际上它真的是很厉害的一种东西.它是一种动态的链剖分结构,其实就是对于剖分出来的重链使用LCT去进行维护.cut 与 link 两个操作让 ...
    
			
    6. 
						
  6. BZOJ2242  [SDOI2011]计算器   【BSGS】
			
    2242: [SDOI2011]计算器 Time Limit: 10 Sec  Memory Limit: 512 MB Submit: 4741  Solved: 1796 [Submit][Sta ...
    
			
    7. 
						
  7. bzoj1656: [Usaco2006 Jan] The Grove 树木 (bfs+新姿势)
			
      题目大意:一个n*m的图中,“.”可走,“X”不可走,“*”为起点,问从起点开始绕所有X一圈回到起点最少需要走多少步. 一开始看到这题,自己脑洞了下怎么写,应该是可过,然后跑去看了题解,又学会了一 ...
    
			
    8. 
						
  8. jq的$.each遍历数组
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    9. 
						
  9. RGB向yuv的转化最优算法,快得让你吃惊!
			
    朋友曾经给我推荐了一个有关代码优化的pdf文档<让你的软件飞起来>,看完之后,感受颇深.为了推广其,同时也为了自己加深印象,故将其总结为word文档.下面就是其的详细内容总结,希望能于己于 ...
    
			
    10. 
						
  10. FreeRTOS - 如何根据FreeRTOS提供的功能（信号量、任务通知、队列等）设计程序
			
    原文地址:http://www.cnblogs.com/god-of-death/p/6917837.html 1.二值信号量 就像一个标志位,事件产生置一,事件处理后直零 用于任务之间的同步,即一个 ...
    
			
    11.