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

Posted easynvr

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了海康大华安防网络摄像头OnvifRTSP网络无插件直播流媒体服务解决方案EasyNVR表单重复提交的优化方案相关的知识,希望对你有一定的参考价值。

从功能上来说,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);

   }

技术图片

以上是关于海康大华安防网络摄像头OnvifRTSP网络无插件直播流媒体服务解决方案EasyNVR表单重复提交的优化方案的主要内容,如果未能解决你的问题,请参考以下文章

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍

RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播流媒体服务器EasyNVR之鉴权接口的调用配置说明

海康大华等网络摄像头RTSP_Onvif网页无插件直播流媒体服务器EasyNVR鉴权出现跨域问题的解决方法

RTSP_ONVIF协议视频流媒体网页无插件直播服务器EasyNVR配置海康大华等安防摄像头通道地址的方法

海康大华等监控摄像头通过H5方式无插件低延时播放方案

海康大华等监控摄像头通过H5方式无插件低延时播放方案