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

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

問(wèn)題截圖：

問(wèn)題分析:

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

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

解決問(wèn)題：

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

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

不難看出都是通過(guò)submit來(lái)觸發(fā)Ajax的。

整體的流程無(wú)非這兩種：

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

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

Ajax提供的操作空間還是相當(dāng)完善的。

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

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

HTML中的input元素、button元素、option元素等都具有一個(gè)disabled屬性。
當(dāng)賦予該屬性時(shí)該元素將變得不可交互。可以用這個(gè)屬性來(lái)屏蔽提交按鈕。

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

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

---

關(guān)于EasyNVR

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

詳細(xì)說(shuō)明：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无插件流媒体服务器前端技术防止重复提交的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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