奇怪！post提交 地址栏参数竟然可见

转：    http://blog.csdn.net/yuebinghaoyuan/article/details/7727802   

在做项目中，form标签中method="post"，并且在提交的方法中，也显示声明method="post".但是地址栏参数依然可见。

       地址栏参数可见，最大的弊端暴露信息，网站没有安全性。另外一个缺点是，当地址栏参数很长，导致页面无法运行。

       为什么地址栏参数会可见呢？不是使用method的提交了。首先来看一下我的提交方式。

       js某一函数的提交代码如下：

[javascript] view plain copy
 
 print?
  1. with(document.forms[0])     {  
  2.     action="roleAuthoriedManager!getModuleOperateBySystem?roleId="  
  3.             +document.getElementById("roleId").value  
  4.             +"&systemId="+document.getElementById("systemId").value  
  5.             +"&pageNo="+<%=pageModelModule.getPreviousPageNumber()%>  
  6.             +"&queryString="+document.getElementById("searchById").value  
  7.             +"&ids="+checkedIds;  
  8.     method="post";  
  9.     submit();  
  10. }  

   看见代码，你明白了为什么了吗？

   若是看明白了，说明你对get与post提交有深入了解；若有点迷惑的，先不用着急，小弟继续分析。

   首先解释一下，为什么地址栏参数可见。

   因为，我的action转向中已经明显滴传参数了。只要action中明显的传参数，无论get或post，这些参数一定会出现在地址栏中。

  那get提交与post提交区别是如何的呢？

  大家都知道，get提交，地址栏参数是可见的；而post提交，地址栏参数是不可见的；所以post提交比get提交更安全。

  这句话，没有错。我也是常常跟别人这么讲的，但是这句话很模糊，参数可见与否，到底是指那些参数？为什么我action传入的参数使用post提交，依然可见额？

   详细的说法是：get提交，是把表单上的input的name以及value值作为参数传递过去。（这里必须设置name值，若只有id，没有name，则地址栏不会显示其参数）。

   而post提交，同样也是把表单上的input的name以及value提交过去了。但是地址栏中没有表单上的参数以及值。

   这个是两者之间明显的区别。当然由这个区别的原理继续进行区分：

   get，地址栏参数显示，所以传递的参数是个数限制的。字符太长，导致页面无法运行。而post无参数限制。所以表单上input比较多，可以考虑post。

   有时在特殊的情况，只能使用post提交。这个不必担心，到时候直接查查即可。

    知道了原因以及区别后，那如何解决这个办法呢？action后面的参数是必须要传的。那如何办呢？

    第一种办法：根据get与post本质原因，我们可以想到，把action后面紧跟的参数做成隐含域，这样作为表单上的一部分传递过去。

     这个办法是可行的，并且大部分也是这么执行的。

    我没有采用第一种办法，为啥呢？因为我参数不符合第一种，action后面的参数如ids不能做成隐含域，因为他是时时更新的。我这块肯定不能在action后面传递参数，因为参数太长，导致页面无法运行，第一种隐含域的办法，又不可行。那怎么解决呢？

     第二种办法：提交时根据action后面的参数创建菜单，隐含域。

     其实，第二种是在第一种的基础上扩展的，还是利用隐含域。只不过是重新定义了提交类。

     第二种办法：js代码如下：  

[javascript] view plain copy
 
 print?
  1. function submitForm(url,data) {  
  2.            var eleForm=document.body.appendChild(document.createElement('form'));  
  3.  eleForm.action=url;  
  4.  for(var property in data)  
  5.      {  
  6.       var hiddenInput=document.createElement('input');  
  7.       hiddenInput.type='hidden';  
  8.       hiddenInput.name=property;  
  9.       hiddenInput.value=data[property];  
  10.       eleForm.appendChild(hiddenInput);  
  11.      }  
  12.  this.eleForm=eleForm;  
  13.  if(!submitForm._initialized)  
  14.      {  
  15.        
  16.      submitForm.prototype.post = function()  
  17.         {  
  18.              this.eleForm.method = 'post';  
  19.              this.eleForm.submit();  
  20.         };           
  21.         submitForm._initialized = true;  
  22.         }  
  23.   
  24. }  

    参数解释：url，即form表单转向。data，即action后面参数。这里是用json字符串表示。

      json，全名JavaScript object notation,一种轻量级的资料交换语言，主要应用javascript与服务器打交道。json具有两种表达方式。

     一个是对象，用｛｝，花括号里面是名称值对，表示方式：名称:值，其中每对用逗号隔开。

    一个是值序列表，用[],中括号里面是字符串，每个字符串，用逗号隔开。

    常用的是第一种，若是想进一步了解json，可以自己自主学习哈。

    定义了上述提交的方式。提交方式解释如下：

    首先定义了form表单；

    然后定义了表单上的隐含域。

    把action后面的参数付给隐含域的名称以及值。

    然后重新定了post方式提交。

   应用如下：

[html] view plain copy
 
 print?
  1. new submitForm('userAuthoriedManager!selectRole',         
  2.                     {userId:userId.value,  
  3.          pageNo:'<%=pageModel.getNextPageNumber()%>',  
  4.          queryString:document.getElementById("searchById").value,  
  5.          checkedIds:checkedIds}).post();  

  传参问题已经解决啦。

  其实，认识是随着时间以及阅历不断加深的。但是每次把对事物的认识都记录或装在脑子中，也许某一天的实践or问题，就是擦出新的认识。最终，其实这种认识就是一种经验，项目的经验就是如此一点一滴积累起来的，不因其小而丢弃。滴水穿石，非一日之功

posted @ 2017-05-04 19:43  小学生II  阅读(883)  评论(0)  编辑  收藏  举报