来源:http://andrewye.iteye.com/blog/552324
web应用中常见的问题就是多次提交,由于表单提交的延迟,有时几秒或者更长,让用户有机会多次点击提交按钮,从而导致服务器端代码的种种麻烦。
为了解决这个问题,我们可以绑定处理程序到表单的提交事件上,在提交按钮第一次点击之后禁止提交按钮。
- $("form").submit(function(){
- $(":submit",this).attr("disabled","disabled");
- });
在事件处理程序体内,用:submit选择器来获取表单内所有的提交按钮,并将disable特性值改为disabled(w3c官方推荐的特性设置)。请注意,建立匹配集的时候我们提供this的上下文值,this指针总是引用已绑定事件的页面元素。
以这种方式禁止提交按钮,不会免除服务器代码的责任-----预防双重提交或者其它类型的验证问题。添加这种代码到客户端能够提高终端用户的界面友好程度,但是它防止不了攻击或者其他黑客企图,所以我们的服务器端代码应该始终保持警惕
相关推荐
在使用JavaScript的Ajax请求时,如果在Ajax请求完成后没有阻止按钮的默认行为,即表单提交,就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一:更改按钮的type属性 第一种...
在IT领域,jQuery是一款广泛使用的...综上所述,这个压缩包提供了一个完整的基于jQuery的多图上传解决方案,结合了图片预览、删除和Ajax提交功能。开发者可以参考这个项目,学习如何在自己的应用中实现类似的功能。
当用户点击提交按钮后,我们可以使用jQuery监听`submit`事件,并在触发后禁用按钮,防止用户多次点击。这可以通过`.attr()`方法实现,设置`disabled`属性为`true`: ```javascript $('#yourForm').on('submit', ...
`on()`方法可以一次绑定多个事件,甚至可以对未创建的元素进行事件绑定,提高了代码的灵活性。 ```javascript $(document).on('click', '#myElement', function() { // 事件处理代码 }); ``` ### 三、动画与效果 ...
开发者可以根据自己的需求对这个项目进行二次开发,例如添加更多定制化的组件、优化性能,或者调整界面样式以匹配品牌风格。 总的来说,jQuery-Desktop是一个高效且可定制的前端解决方案,它将jQuery的强大功能与...
本实例"ASP实例开发源码—asp.net(c571)等待效果和防止多次提交的代码.zip"就是针对这些问题提供解决方案的源码示例。 1. **页面等待效果**: 在用户进行数据处理或页面跳转时,为了防止用户感觉系统无响应,通常...
这个功能在现代Web应用中尤其重要,因为它允许用户一次性上传多个文件,提高了用户体验。 首先,我们要了解核心文件`jquery.MultiFile.js`,这是实现多文件上传的关键。这个插件扩展了HTML `<input type="file">`...
8. 缓存选择器结果(Caching Selector Results):jQuery的选择器结果被缓存起来,这意味着如果在同一选择器上多次使用jQuery方法,jQuery会直接从缓存中取得结果,加快执行速度。 9. 简化脚本编写(Simplify ...
总结,jQuery手写签名插件jSignature为网页应用带来了高效、直观的签名解决方案,无论是桌面还是移动端,都能提供优秀的用户体验。其灵活的配置选项和强大的数据处理能力,使其在多个领域有着广泛的应用。通过熟练...
但是,`.click()`方法会导致事件被绑定多次,因此不适合用来防止重复点击。针对此类场景,jQuery提供了`.one()`方法。`.one()`方法确保事件监听器在被触发后自动解绑,从而保证按钮在第一次点击后无法再次被点击。 ...
另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交。 onclick事件里面执行 $(this).attr(‘disabled’,’disabled’); 在点击一次后立马将按钮设置为...
6. **表单提交阻止**:当表单存在无效字段时,插件会自动阻止表单的提交,直到所有问题都得到解决。 7. **国际化支持**:通过加载不同的语言文件,可以实现验证消息的多语言显示。 在《jQuery Validate验证手册》...
4. **数据管理**:能够保存和加载表单配置,方便多次使用或版本控制。 5. **Ajax支持**:支持使用Ajax提交表单,实现无刷新的数据提交。 6. **API接口**:提供JavaScript API,方便与其他库或框架集成。 ## 使用...
这极大地提高了用户在上传大量文件时的体验,减少了多次点击的繁琐步骤。 ### 3. 表单数据处理 传统表单提交会刷新页面,但jQuery-File-Upload使用Ajax技术异步上传文件,使得文件上传过程中页面保持不刷新,提升了...
有时,你可能希望一次验证多个相关的字段。可以使用`:input`选择器结合`groups`选项来实现: ```javascript $("#myForm").validate({ groups: { nameGroup: "firstName last_name" // 逗号分隔的字段名 }, ...
"jQuery多文件上传"就是解决这个问题的一种方案。它通过提供一个交互性强、用户体验良好的界面,使得用户可以方便地批量上传文件。本插件已经经过优化,包含了上传进度条功能,能实时显示每个文件的上传进度,增加了...
本文将介绍如何使用jQuery和PHP解决这种超多`input`表单的提交问题。 首先,我们需要构建表单的HTML结构,按照需求布局,确保良好的用户体验。对于本文的例子,假设有一个类似Word文档的大型表单,包含众多输入字段...
很多人可能都会遇到在调试的时候用了return了...这个问题我最近也碰到了,尝试了多次也没有用,后来终于发现了其中的问题,下面分享处理给大家,让同样遇到这个问题的朋友们能够看看,有需要的朋友们下面来一起看看吧。
1. **多文件上传**:jQuery Upload允许用户一次性选择多个文件进行上传,提高上传效率。 2. **进度条展示**:在文件上传过程中,提供实时的进度条反馈,让用户了解上传进度。 3. **取消上传**:用户可以随时取消正在...