一种按钮事件处理方法和装置与流程

本发明涉及web数据处理领域，具体涉及一种应用于web按钮事件的处理方法。

背景技术：

web应用上的按钮功能主要用于把前端的数据提交数据到后台进行一些特定的操作并返回处理结果。当前常用的方式有三种，第一种，比较原始的，例如asp.net提供的按钮控件，通过控件内部的方法和事件生成页面和相应的事件。这种方式使用简单，但这种方式不够灵活，性能也比较差，目前大系统开发已经很少会这么去实现。第二种，基于表单的按钮提交，通过特有的表单提交事件，将表单数据提交到后台。这种方式局限于表单的提交，且很难实现提交过程中的个性化。第三种，也就是目前web系统构建有关按钮提交中比较常用的方式，通过jq中的ajax方法把指定的数据提交都后台。这种方式比较灵活，适用绝大部分的应用场景。目前的按钮相关的技术虽然已经满足了web系统开发中的需求，但是开发效率比较低且由于开发人员的经验和知识的参差不齐很难把控写出完美的按钮功能，每个按钮在提交的过程中，实际可能包含了很多的操作和隐藏的bug，例如可能出现因为网络的不稳定导致重复提交的问题。

技术实现要素：

为了克服现有技术的不足，本发明的目的在于提供一种按钮事件处理方法和装置，解决现有web按钮因网络速度比较慢而导致用户重复提交的问题。

为解决上述问题，本发明所采用的技术方案如下：

方案一：

一种按钮事件处理方法，包括以下步骤：

s1、监测前端的按钮事件，当按钮事件触发时获取本次按钮事件中的待处理数据，并执行下一步骤；

s2、解绑前端的按钮事件，以及改变前端的按钮的样式和文字；

s3、将待处理数据提交到后台服务器；

s4、获取后台服务器处理后返回的处理结果，根据处理结果判断是否处理成功，若是，则执行步骤s5，若否，则执行步骤s6；

s5、根据处理结果判断是否需要执行用户自定义的操作，若是，则直接执行用户自定义的操作，若否，则执行步骤s6；

s6、重新绑定前端的按钮事件，还原前端的按钮的样式和文字。

优选的，在步骤s1与s2之间还包括：

s11：验证前台预设的验证规则，判断是否验证通过，若是，则执行下一步骤，若否，则结束流程。

优选的，在步骤s3中，通过ajax技术将待处理数据提交到后台服务器。

优选的，所述待处理数据中包含身份认证信息。

优选的，所述用户自定义的操作为跳转至新页面的操作。

方案二：

一种按钮事件处理装置，包括以下模块：

事件监测触发模块：用于监测前端的按钮事件，当按钮事件触发时获取本次按钮事件中的待处理数据，并执行下一模块；

事件解绑模块：用于解绑前端的按钮事件，以及改变前端的按钮的样式和文字；

数据提交模块：用于将待处理数据提交到后台服务器；

判断模块：用于获取后台服务器处理后返回的处理结果，根据处理结果判断是否处理成功，若是，则执行判断执行模块，若否，则执行重新绑定模块；

判断执行模块：用于根据处理结果判断是否需要执行用户自定义的操作，若是，则直接执行用户自定义的操作，若否，则执行重新绑定模块；

重新绑定模块：用于重新绑定前端的按钮事件，还原前端的按钮的样式和文字。

优选的，在事件监测触发模块与事件解绑模块之间还包括：

验证模块：用于验证前台预设的验证规则，判断是否验证通过，若是，则执行下一模块，若否，则结束流程。

优选的，在数据提交模块中，通过ajax技术将待处理数据提交到后台服务器。

优选的，所述待处理数据中包含身份认证信息。

优选的，所述用户自定义的操作为跳转至新页面的操作。

相比现有技术，本发明的有益效果在于：能够有效的防止提交数据过程中，因网络速度比较慢而导致用户重复提交的问题，同时，提高的用户操作按钮的用户体验。

附图说明

图1为本发明按钮事件处理方法的流程图；

图2为本发明按钮事件处理装置的结构图。

具体实施方式

下面，结合附图以及具体实施方式，对本发明做进一步描述：

如图1所示，本发明公开了一种按钮事件处理方法，包括以下步骤：

s1、监测前端的按钮事件，当按钮事件触发时获取本次按钮事件中的待处理数据，并执行步骤s11。在前端的页面加载时会生成一个随机的身份认证信息(token)，身份认证信息会保存在当前页面同时保存到后台服务器的session(会话)中，待处理数据除了业务数据外还包含该身份认证信息。

s11：验证前台预设的验证规则，例如表单验证，判断是否验证通过，若是，则执行步骤s2，若否，则结束流程。

s2、解绑前端的按钮事件，以及改变前端的按钮的样式和文字。解绑前端的按钮事件是指使前端对应的按钮失去事件提交功能，防止该按钮重复提交按钮事件，同时根据预先定义好的配置改变前端的按钮的样式和文字。

s3、将待处理数据提交到后台服务器。优选通过ajax技术将待处理数据提交到后台服务器。后台服务器会先根据待处理数据中的身份认证信息进行验证，通过后对待处理数据中的业务数据进行处理，处理后返回处理结果。

s4、获取后台服务器处理后返回的处理结果，根据处理结果判断是否处理成功，若是，则执行步骤s5，若否，则执行步骤s6。

s5、根据处理结果判断是否需要执行用户自定义的操作，若是，则直接执行用户自定义的操作，若否，则执行步骤s6。在该实施例中，用户自定义的操作为跳转至新页面的操作。

s6、重新绑定前端的按钮事件，还原前端的按钮的样式和文字。当后台服务器返回处理失败结果，或者不跳转至新页面，都需要重新绑定前端的按钮事件，还原前端的按钮的样式和文字，使对应的前端页面的按钮能够正常使用。

通过上述的方法流程，能够有效的防止提交数据过程中，因网络速度比较慢而导致用户重复提交的问题，同时，提高的用户操作按钮的用户体验。

将上述的方法流程封装在一个组件中，给开发人员提供简单的参数设置,开发人员只需根据说明文档了解相应的参数意义,即可实现完美的按钮提交功能,无需关注具体的实现细节。开发人员只要根据要求设置好相关的参数，即可完成按钮相关的功能，无需关注具体的技术实现细节和执行过程，从而提高开发的效率，而且能够保证按钮事件的开发规范化，标准化，保证系统的稳定和安全性。

如图2所示，基于上述的按钮事件处理方法，本发明还公开了一种按钮事件处理装置，包括以下模块：

一种按钮事件处理装置，包括以下模块：

事件监测触发模块：用于监测前端的按钮事件，当按钮事件触发时获取本次按钮事件中的待处理数据，并执行下一模块；

事件解绑模块：用于解绑前端的按钮事件，以及改变前端的按钮的样式和文字；

数据提交模块：用于将待处理数据提交到后台服务器；

判断模块：用于获取后台服务器处理后返回的处理结果，根据处理结果判断是否处理成功，若是，则执行判断执行模块，若否，则执行重新绑定模块；

判断执行模块：用于根据处理结果判断是否需要执行用户自定义的操作，若是，则直接执行用户自定义的操作，若否，则执行重新绑定模块；

重新绑定模块：用于重新绑定前端的按钮事件，还原前端的按钮的样式和文字。

优选的，在事件监测触发模块与事件解绑模块之间还包括：

验证模块：用于验证前台预设的验证规则，判断是否验证通过，若是，则执行下一模块，若否，则结束流程。

优选的，在数据提交模块中，通过ajax技术将待处理数据提交到后台服务器。

优选的，所述待处理数据中包含身份认证信息。

优选的，所述用户自定义的操作为跳转至新页面的操作。

对本领域的技术人员来说，可根据以上描述的技术方案以及构思，做出其它各种相应的改变以及形变，而所有的这些改变以及形变都应该属于本发明权利要求的保护范围之内。