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

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

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

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

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

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

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代码如下：

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. submitForm.prototype.post = function()
16. {
17. this.eleForm.method = 'post';
18. this.eleForm.submit();
19. };
20. submitForm._initialized = true;
21. }
22. }

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

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

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

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

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

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

首先定义了form表单；

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

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

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

应用如下：

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

传参问题已经解决啦。

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