EasyNVR前端防止提交成功後多餘操做提交

時間 2019-11-09

原文原文鏈接

如今隨着接觸EasyNVR時間愈來愈長,愈加的以爲EasyNVR真的是一個「神器」。從功能上來講自身不只能夠拉出來使用(具體功能搜索EasyNVR必定有驚喜！)，也能夠做爲設備端與第三方平臺接入使用。從界面來講，簡潔，明朗，方便用戶操做。。。。。。不能這樣本身舔本身了。。。有點過度了，有視頻直播需求能夠試試他，說不定會幫你少走不少彎路。javascript

回到具體問題上來，有用戶反應EasyNVR前端對於表單提交這一塊用戶體驗不是很好。主要問題是表單在提交成功之後，提交按鈕依然能夠觸發。竟然有用戶提出來，咱們就要盡最大可能知足用戶需求。css

問題截圖：

問題分析:

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

從代碼中咱們不難看出，EasyNVR前端頁面是經過觸發Ajax來進行表單提交的。出現上圖中的問題主要是因爲屢次的觸發Ajax。所以，要規避這個問題，咱們能夠經過限定AJax的觸發來，完成這項需求。前端

解決問題：

首先，咱們找出，是什麼觸發這個Ajax事件的。java

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

不難看出都是經過submit來觸發Ajax的。web

總體的流程無非這兩種：ajax

1.點擊提交按鈕->觸發ajax提交數據->提交成功->屏蔽提交按鈕防止再次提交;網絡

2.點擊提交按鈕->觸發ajax提交數據->提交失敗->保持提交按鈕狀態供再次提交；異步

Ajax提供的操做空間仍是至關完善的。

咱們都知道ajax是執行異步網絡請求，咱們能夠在請求前，請求後，請求動做完成，請求動做成功、請求動做失敗等都有對應的函數來進行操做。ajax的這些特徵，就更加的方便咱們來操做了。

首先咱們拋開提交的內容，從提交的過程來講，
在EasyNVR配置表單中咱們沒有隻須要注重ajax請求動做的成功和失敗；
咱們主要調用的函數就是success: function、error: function；
請求成功後在success中將提交按鈕屏蔽起來，若是請求失敗，提示出錯誤緣由，保持提交按鈕的能夠提交的狀態。svg

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/