現(xiàn)在隨著接觸EasyNVR時間越來越長,越發(fā)的覺得EasyNVR真的是一個“神器”。從功能上來說自身不僅可以拉出來使用(具體功能搜索EasyNVR一定有驚喜！)，也可以作為設(shè)備端與第三方平臺接入使用。從界面來說，簡潔，明朗，方便用戶操作。。。。。。不能這樣自己舔自己了。。。有點過分了，有視頻直播需求可以試試他，說不定會幫你少走很多彎路。

回到具體問題上來，有用戶反應(yīng)EasyNVR前端對于表單提交這一塊用戶體驗不是很好。主要問題是表單在提交成功以后，提交按鈕依然可以觸發(fā)。居然有用戶提出來，我們就要盡最大可能滿足用戶需求。

問題截圖：

問題分析:

$.ajax({type: "GET",url: _url + "/setbaseconfig",data: $this.serialize(),})

從代碼中我們不難看出，EasyNVR前端頁面是通過觸發(fā)Ajax來進行表單提交的。出現(xiàn)上圖中的問題主要是由于多次的觸發(fā)Ajax。因此，要規(guī)避這個問題，我們可以通過限定AJax的觸發(fā)來，完成這項需求。

解決問題：

首先，我們找出，是什么觸發(fā)這個Ajax事件的。

$('#web-config form, #nvr-config form').validator().on('submit', function(e) { ......... }

不難看出都是通過submit來觸發(fā)Ajax的。

整體的流程無非這兩種：

1.點擊提交按鈕->觸發(fā)ajax提交數(shù)據(jù)->提交成功->屏蔽提交按鈕防止再次提交;

2.點擊提交按鈕->觸發(fā)ajax提交數(shù)據(jù)->提交失敗->保持提交按鈕狀態(tài)供再次提交；

Ajax提供的操作空間還是相當完善的。

我們都知道ajax是執(zhí)行異步網(wǎng)絡(luò)請求，我們可以在請求前，請求后，請求動作完成，請求動作成功、請求動作失敗等都有對應(yīng)的函數(shù)來進行操作。ajax的這些特征，就更加的方便我們來操作了。

首先我們拋開提交的內(nèi)容，從提交的過程來說，
在EasyNVR配置表單中我們沒有只需要注重ajax請求動作的成功和失敗；
我們主要調(diào)用的函數(shù)就是success: function、error: function；
請求成功后在success中將提交按鈕屏蔽起來，如果請求失敗，提示出錯誤原因，保持提交按鈕的可以提交的狀態(tài)。

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

本篇主要敘述的是屏蔽按鈕的一個過程。
下一篇將介紹如何實現(xiàn)當表單內(nèi)容出現(xiàn)變化后可以提交，表單內(nèi)容不變的情況下依然屏蔽提交按鈕。

---

關(guān)于EasyNVR

EasyNVR能夠通過簡單的網(wǎng)絡(luò)攝像機通道配置，將傳統(tǒng)監(jiān)控行業(yè)里面的高清網(wǎng)絡(luò)攝像機IP Camera、NVR等具有RTSP協(xié)議輸出的設(shè)備接入到EasyNVR，EasyNVR能夠?qū)⑦@些視頻源的音視頻數(shù)據(jù)進行拉取，轉(zhuǎn)換為RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），并且EasyNVR能夠?qū)⒁曨l源的直播數(shù)據(jù)對接到第三方CDN網(wǎng)絡(luò)，實現(xiàn)互聯(lián)網(wǎng)級別的直播分發(fā)；

詳細說明：http://www.easydarwin.org/easynvr/

獲取更多信息

郵件：support@easydarwin.org

WEB：www.EasyDarwin.org

Copyright ? EasyDarwin.org 2012-2017

轉(zhuǎn)載于:https://www.cnblogs.com/babosa/p/8206993.html

總結(jié)

以上是生活随笔為你收集整理的EasyNVR无插件流媒体服务器前端技术防止重复提交的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。