`
jackroomage
  • 浏览: 1215070 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

jquery 解决多次提交

 
阅读更多

来源:http://andrewye.iteye.com/blog/552324

web应用中常见的问题就是多次提交,由于表单提交的延迟,有时几秒或者更长,让用户有机会多次点击提交按钮,从而导致服务器端代码的种种麻烦。

为了解决这个问题,我们可以绑定处理程序到表单的提交事件上,在提交按钮第一次点击之后禁止提交按钮。

 

Js代码  收藏代码
  1. $("form").submit(function(){  
  2. $(":submit",this).attr("disabled","disabled");  
  3. });  

 

在事件处理程序体内,用:submit选择器来获取表单内所有的提交按钮,并将disable特性值改为disabled(w3c官方推荐的特性设置)。请注意,建立匹配集的时候我们提供this的上下文值,this指针总是引用已绑定事件的页面元素。

以这种方式禁止提交按钮,不会免除服务器代码的责任-----预防双重提交或者其它类型的验证问题。添加这种代码到客户端能够提高终端用户的界面友好程度,但是它防止不了攻击或者其他黑客企图,所以我们的服务器端代码应该始终保持警惕

分享到:
评论

相关推荐

    按钮的Ajax请求时一次点击两次提交的解决方法

    在使用JavaScript的Ajax请求时,如果在Ajax请求完成后没有阻止按钮的默认行为,即表单提交,就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一:更改按钮的type属性 第一种...

    可预览删除的jQuery多图上传ajax提交.zip

    在IT领域,jQuery是一款广泛使用的...综上所述,这个压缩包提供了一个完整的基于jQuery的多图上传解决方案,结合了图片预览、删除和Ajax提交功能。开发者可以参考这个项目,学习如何在自己的应用中实现类似的功能。

    遮罩层方法(jquery)

    当用户点击提交按钮后,我们可以使用jQuery监听`submit`事件,并在触发后禁用按钮,防止用户多次点击。这可以通过`.attr()`方法实现,设置`disabled`属性为`true`: ```javascript $('#yourForm').on('submit', ...

    jQuery1.8_jQuery·框架_

    `on()`方法可以一次绑定多个事件,甚至可以对未创建的元素进行事件绑定,提高了代码的灵活性。 ```javascript $(document).on('click', '#myElement', function() { // 事件处理代码 }); ``` ### 三、动画与效果 ...

    jQuery-Desktop桌面效果

    开发者可以根据自己的需求对这个项目进行二次开发,例如添加更多定制化的组件、优化性能,或者调整界面样式以匹配品牌风格。 总的来说,jQuery-Desktop是一个高效且可定制的前端解决方案,它将jQuery的强大功能与...

    ASP实例开发源码—asp.net(c571)等待效果和防止多次提交的代码.zip

    本实例"ASP实例开发源码—asp.net(c571)等待效果和防止多次提交的代码.zip"就是针对这些问题提供解决方案的源码示例。 1. **页面等待效果**: 在用户进行数据处理或页面跳转时,为了防止用户感觉系统无响应,通常...

    jquery 很不错的多文件上传类

    这个功能在现代Web应用中尤其重要,因为它允许用户一次性上传多个文件,提高了用户体验。 首先,我们要了解核心文件`jquery.MultiFile.js`,这是实现多文件上传的关键。这个插件扩展了HTML `<input type="file">`...

    《 jQuery实战.pdf》高清下载

    8. 缓存选择器结果(Caching Selector Results):jQuery的选择器结果被缓存起来,这意味着如果在同一选择器上多次使用jQuery方法,jQuery会直接从缓存中取得结果,加快执行速度。 9. 简化脚本编写(Simplify ...

    jQuery手写签名插件jSignature

    总结,jQuery手写签名插件jSignature为网页应用带来了高效、直观的签名解决方案,无论是桌面还是移动端,都能提供优秀的用户体验。其灵活的配置选项和强大的数据处理能力,使其在多个领域有着广泛的应用。通过熟练...

    jQuery实现防止提交按钮被双击的方法

    但是,`.click()`方法会导致事件被绑定多次,因此不适合用来防止重复点击。针对此类场景,jQuery提供了`.one()`方法。`.one()`方法确保事件监听器在被触发后自动解绑,从而保证按钮在第一次点击后无法再次被点击。 ...

    阻止表单提交按钮多次提交的完美解决方法

    另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交。 onclick事件里面执行 $(this).attr(‘disabled’,’disabled’); 在点击一次后立马将按钮设置为...

    jquery validate 验证手册

    6. **表单提交阻止**:当表单存在无效字段时,插件会自动阻止表单的提交,直到所有问题都得到解决。 7. **国际化支持**:通过加载不同的语言文件,可以实现验证消息的多语言显示。 在《jQuery Validate验证手册》...

    jquery开发的form第二版

    4. **数据管理**:能够保存和加载表单配置,方便多次使用或版本控制。 5. **Ajax支持**:支持使用Ajax提交表单,实现无刷新的数据提交。 6. **API接口**:提供JavaScript API,方便与其他库或框架集成。 ## 使用...

    jQuery-File-Upload

    这极大地提高了用户在上传大量文件时的体验,减少了多次点击的繁琐步骤。 ### 3. 表单数据处理 传统表单提交会刷新页面,但jQuery-File-Upload使用Ajax技术异步上传文件,使得文件上传过程中页面保持不刷新,提升了...

    Jquery Validation

    有时,你可能希望一次验证多个相关的字段。可以使用`:input`选择器结合`groups`选项来实现: ```javascript $("#myForm").validate({ groups: { nameGroup: "firstName last_name" // 逗号分隔的字段名 }, ...

    jquery多文件上传

    "jQuery多文件上传"就是解决这个问题的一种方案。它通过提供一个交互性强、用户体验良好的界面,使得用户可以方便地批量上传文件。本插件已经经过优化,包含了上传进度条功能,能实时显示每个文件的上传进度,增加了...

    jQuery解决input超多的表单提交

    本文将介绍如何使用jQuery和PHP解决这种超多`input`表单的提交问题。 首先,我们需要构建表单的HTML结构,按照需求布局,确保良好的用户体验。对于本文的例子,假设有一个类似Word文档的大型表单,包含众多输入字段...

    Jquery表单验证失败后不提交的解决方法

    很多人可能都会遇到在调试的时候用了return了...这个问题我最近也碰到了,尝试了多次也没有用,后来终于发现了其中的问题,下面分享处理给大家,让同样遇到这个问题的朋友们能够看看,有需要的朋友们下面来一起看看吧。

    jquery Upload

    1. **多文件上传**:jQuery Upload允许用户一次性选择多个文件进行上传,提高上传效率。 2. **进度条展示**:在文件上传过程中,提供实时的进度条反馈,让用户了解上传进度。 3. **取消上传**:用户可以随时取消正在...

Global site tag (gtag.js) - Google Analytics