EasyNVR无插件流媒体服务器前端技术防止重复提交的方法
2017-11-28 13:01
579 查看
现在随着接触EasyNVR时间越来越长,越发的觉得EasyNVR真的是一个“神器”。从功能上来说自身不仅可以拉出来使用(具体功能搜索EasyNVR一定有惊喜!),也可以作为设备端与第三方平台接入使用。从界面来说,简洁,明朗,方便用户操作。。。。。。不能这样自己舔自己了。。。有点过分了,有视频直播需求可以试试他,说不定会帮你少走很多弯路。
回到具体问题上来,有用户反应EasyNVR前端对于表单提交这一块用户体验不是很好。主要问题是表单在提交成功以后,提交按钮依然可以触发。居然有用户提出来,我们就要尽最大可能满足用户需求。
从代码中我们不难看出,EasyNVR前端页面是通过触发Ajax来进行表单提交的。出现上图中的问题主要是由于多次的触发Ajax。因此,要规避这个问题,我们可以通过限定AJax的触发来,完成这项需求。
不难看出都是通过submit来触发Ajax的。
整体的流程无非这两种:
1.点击提交按钮->触发ajax提交数据->提交成功->屏蔽提交按钮防止再次提交;
2.点击提交按钮->触发ajax提交数据->提交失败->保持提交按钮状态供再次提交;
Ajax提供的操作空间还是相当完善的。
首先我们抛开提交的内容,从提交的过程来说,
在EasyNVR配置表单中我们没有只需要注重ajax请求动作的成功和失败;
我们主要调用的函数就是success: function、error: function;
请求成功后在success中将提交按钮屏蔽起来,如果请求失败,提示出错误原因,保持提交按钮的可以提交的状态。
HTML中的input元素、button元素、option元素等都具有一个disabled属性。
当赋予该属性时该元素将变得不可交互。可以用这个属性来屏蔽提交按钮。
本篇主要叙述的是屏蔽按钮的一个过程。
下一篇将介绍如何实现当表单内容出现变化后可以提交,表单内容不变的情况下依然屏蔽提交按钮。
详细说明:http://www.easydarwin.org/easynvr/
WEB:www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
回到具体问题上来,有用户反应EasyNVR前端对于表单提交这一块用户体验不是很好。主要问题是表单在提交成功以后,提交按钮依然可以触发。居然有用户提出来,我们就要尽最大可能满足用户需求。
问题截图:
问题分析:
$.ajax({ type: "GET", url: _url + "/setbaseconfig", data: $this.serialize(), })
从代码中我们不难看出,EasyNVR前端页面是通过触发Ajax来进行表单提交的。出现上图中的问题主要是由于多次的触发Ajax。因此,要规避这个问题,我们可以通过限定AJax的触发来,完成这项需求。
解决问题:
首先,我们找出,是什么触发这个Ajax事件的。$('#web-config form, #nvr-config form').validator().on('submit', function(e) { ......... }
不难看出都是通过submit来触发Ajax的。
整体的流程无非这两种:
1.点击提交按钮->触发ajax提交数据->提交成功->屏蔽提交按钮防止再次提交;
2.点击提交按钮->触发ajax提交数据->提交失败->保持提交按钮状态供再次提交;
Ajax提供的操作空间还是相当完善的。
我们都知道ajax是执行异步网络请求,我们可以在请求前,请求后,请求动作完成,请求动作成功、请求动作失败等都有对应的函数来进行操作。ajax的这些特征,就更加的方便我们来操作了。
首先我们抛开提交的内容,从提交的过程来说,
在EasyNVR配置表单中我们没有只需要注重ajax请求动作的成功和失败;
我们主要调用的函数就是success: function、error: function;
请求成功后在success中将提交按钮屏蔽起来,如果请求失败,提示出错误原因,保持提交按钮的可以提交的状态。
HTML中的input元素、button元素、option元素等都具有一个disabled属性。
当赋予该属性时该元素将变得不可交互。可以用这个属性来屏蔽提交按钮。
$.ajax({ type: "GET", url: _url + "/setbaseconfig", data: $this.serialize(), success: function(data) { reload(); $.gritter.add({ text: '配置成功,重启后生效!', class_name: 'gritter-info' }); $this.find("button[type=submit]").prop("disabled", true); }, error: function(e){ console.log(e) $this.find("button[type=submit]").prop("disabled", false); }
本篇主要叙述的是屏蔽按钮的一个过程。
下一篇将介绍如何实现当表单内容出现变化后可以提交,表单内容不变的情况下依然屏蔽提交按钮。
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;详细说明:http://www.easydarwin.org/easynvr/
获取更多信息
邮件:support@easydarwin.orgWEB:www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
相关文章推荐
- EasyNVR无插件流媒体服务器前端技术防止重复提交的方法
- EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
- Jquery Validation插件防止重复提交表单的解决方法
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
- 网页直播、微信直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr
- 使用Jquery Validation插件防止重复提交表单的解决方法
- 网页直播、微信直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr
- 网页直播、微信直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息
- EasyNVR前端防止提交成功后多余操作提交
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:关于接口调用常见的一些问题(401 Unauthorized)
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现
- 防止页面重复提交及后退方法
- jQuery 防止Ajax重复提交的简单设置方法
- 网页如何防止刷新重复提交与如何防止后退的解决方法