海康大華安防網絡攝像頭Onvif、RTSP網絡無插件直播流媒體服務解決方案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);

   }