海康大华安防网络摄像头Onvif、RTSP网络无插件直播流媒体服务解决方案EasyNVR表单重复提交的优化方案

2024-05-16 08:07:23

从功能上来说，EasyNVR自身因其界面美观，不仅可以单独作为音视频流媒体业务系统使用(具体功能搜索EasyNVR一定有惊喜！)，也可以作为设备端与第三方平台接入使用；从界面来说，简洁，明朗，更加方便用户操作。但是作为一款软件，EasyNVR并不是全能的，在使用过程中因为业务需求不同，客户会有各种需求反馈给我们。在此过程中，我们会针对性会对相关功能进行优化和提升，满足绝大多数用户的需求。

EasyNVR表单重复提交问题

最近有用户反映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);}

海康大华安防网络摄像头Onvif、RTSP网络无插件直播流媒体服务解决方案EasyNVR表单重复提交的优化方案相关推荐

LiveNVR配置拉转RTSP传统海康大华安防摄像机直播流输出RTSP/RTMP/HLS/HTTP-FLV如何获取直播流地址
LiveNVR配置拉转RTSP传统海康大华安防摄像机直播流输出RTSP/RTMP/HLS/HTTP-FLV如何获取直播流地址 1. Onvif/RTSP流媒体服务 2.配置拉转直播流 2.1 RTSP ...
安防RTSP协议摄像头实现WEB端无插件直播流媒体服务EasyNVR实现海康大华宇视摄像头网页播放的方法
背景分析:微信直播的兴起进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择. Easy ...
海康大华安防网络摄像头Onvif、RTSP网络无插件直播流媒体服务EasyNVR显示设备不在线问题排查步骤汇总
背景需求随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTSP.RT ...
海康大华安防网络摄像头Onvif、RTSP视频流媒体服务解决方案EasyNVR如何针对运营商方案进行异网卡顿问题处理
监控摄像头网络直播越来越多人的开始讲普通安防摄像机接入网络流媒体服务器,进行网络直播.这方面的解决方案比较多,最近测试了一个比较轻巧的解决方案:EasyNVR.这个就是实现接入普通RTSP/Onvi ...
海康大华安防监控网络摄像头网页无插件直播流媒体RTSP专用播放器方案之EasyPlayer-RTSP-Android如何获取拉流的回调？
EasyPlayer是一个RTSP流媒体播放器,在GitHub上开源大部分源码,其主要功能有播放.抓图.录制视频.实时静音/取消静音. EasyPlayer-RTSP-Android回调InitCal ...
RTSP/Onvif安防网络摄像头无插件直播流媒体服务EasyNVR如何实现网络摄像机Onvif/RTSP接入直播与云台控制
什么是Onvif协议 ONVIF规范描述了网络视频的模型.接口.数据类型以及数据交互的模式.并复用了一些现有的标准,如WS系列标准等.ONVIF规范的目标是实现一个网络视频框架协议,使不同厂商所生产的 ...
SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之子系统微服务集群解决方案
SkeyeVSS综合安防监控Onvif.RTSP.GB28181视频云无插件直播点播解决方案之子系统微服务集群我们通过SkeyeVSS系列文章<SkeyeVSS集群部署说明文档>可以了解 ...
SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之监控视频实时多屏预览
SkeyeVSS综合安防监控Onvif.RTSP.GB28181视频云无插件直播点播解决方案之监控视频实时多屏预览 SkeyeVSS支持一分屏.四分屏.九分屏.16分屏.25分屏.36分屏等几种N*N ...
SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之监控视频云端录像无插件回放
SkeyeVSS综合安防监控Onvif.RTSP.GB28181视频云无插件直播点播解决方案之监控视频云端录像无插件回放 SkeyeVSS通过接入SkeyeRMS录像服务器实现对接入系统的摄像机.NV ...

最新文章

热门文章