onclick 实现post提交 js 分割字符串

问题描述：

 

<script type="text/javascript">
       function toPage(url) {
             window.open(url);
      }
</script>

<form action="Xxx.action?method=list" method="post">
         记录1          <input type="button" οnclick="toPage(url);" value="操作">
         记录2          <input type="button" οnclick="toPage(url);" value="操作">
         记录3          <input type="button" οnclick="toPage(url);" value="操作">
         记录4          <input type="button" οnclick="toPage(url);" value="操作">
         ......
         记录N          <input type="button" οnclick="toPage(url);" value="操作">


 </form>

 

上述代码的 操作 的url中含有大量的参数，如：

/exam/review.action?method=getPaper?stuId=4028810a31b834960131b838qn20090204&stuNo=20095338&paperId=402881ed347812a901347813f96d0001&examId=402881ed347812a90134781601fe0023&classNo=QN200902

 由于Get 方式传输的数据量非常小，一般限制在 2 KB 左右，而如此之长的数据很有可能会超过其大小，所以想用post方式提交。

 

-------------------------------------------------------------------------------------------------------------------------------

 

解决方法：

 

<script type="text/javascript">

function toPage(url, data) {
        // data 格式如下：
        // stuId=4028810a31b834960131b838qn20090204&stuNo=20095338&paperId=402881ed347812a901347813f96d0001&examId=402881ed347812a90134781601fe0023&classNo=QN200902
        data += '&';    // 用来分割最后一个参数
	var target = '_blank';
	var tempForm = document.createElement("form");
	tempForm.id = "tempForm1";
	tempForm.method = "post";
	tempForm.action = url;
	tempForm.target = target;		
		
	var count = 0;
	var t = '';
	var name = '';
	var value = '';
        // 将data分割分割成name和value,并根据其创建隐藏域
        for (var i=0; i<data.length; i++) {
		var tmp = data.charAt(i);
		if(tmp != '=' && tmp != '&') {
			t += tmp;
		} else {
			count++;
			if(count % 2 != 0) {
				name = t;
				t = '';
			} else {
				value = t;
				t = '';
				var hideInput = document.createElement("input");
				hideInput.type = "hidden";
				hideInput.name = name;
				hideInput.value = value;
				tempForm.appendChild(hideInput);
			}
		}
	}
			
	document.body.appendChild(tempForm);
			
	tempForm.submit();
	document.body.removeChild(tempForm);
}
 </script>

<form action="Xxx.action?method=list" method="post">
         记录1          <input type="button" οnclick="toPage(url, data);" value="操作">
         记录2          <input type="button" οnclick="toPage(url, data);" value="操作">
         记录3          <input type="button" οnclick="toPage(url, data);" value="操作">
         记录4          <input type="button" οnclick="toPage(url, data);" value="操作">
         ......
         记录N          <input type="button" οnclick="toPage(url, data);" value="操作">


 </form>

 

-------------------------------------------------------------------------------------------------------------------------------

 

总结：

 

1.get与post的区别:

   get传输数据量小，执行效率快，不安全

   post传输数据量大，安全

2.js分割字符串

3.js document.createElement()方法

-------------------------------------------------------------------------------------------------------------------------------

 

参考网址：

http://www.cnblogs.com/jack-liang/archive/2011/07/07/2099921.html

http://www.cnblogs.com/caicainiao/archive/2011/07/02/2096275.html

http://www.cnblogs.com/shenba/archive/2009/08/16/1547429.html