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);

   }

本篇主要叙述的是屏蔽按钮的一个过程。
下一篇将介绍如何实现当表单内容出现变化后能够提交，表单内容不变的状况下依然屏蔽提交按钮。

---

关于EasyNVR

EasyNVR可以经过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具备RTSP协议输出的设备接入到EasyNVR，EasyNVR可以将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），而且EasyNVR可以将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；

详细说明：http://www.easydarwin.org/easynvr/

获取更多信息

邮件：support@easydarwin.org

WEB：www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017