C# 透過AJAX刪除記錄後,如何更新原來的頁面的資料

使用場景:

今天在公司開發時,有這樣一種情況,我已經透過AJAX實現批次刪除的功能。但實現的方式是多次呼叫AJAX,每次刪除一條,刪除後,在頁面上直接再把行tr。remove掉。但這種方式浪費伺服器資源。因此現在需要改為,一次獲取所有的Id,同時一次AJAX呼叫批次刪除掉記錄。

那麼問題來了,批次刪除後如何重新整理頁面,有兩種方案:

1)AJAX呼叫後,返回成功的ID,把成功的ID對應的行,Remove掉,但這樣改變原來公司程式結構模式,所以暫時不考慮了。

2)AJAX呼叫後,返回成功後,直接再模擬點選“查詢”的功能。

先上前端程式碼:

1。在程式顯示列表的HTML標籤中,先標註後要訪問的元素。

C# 透過AJAX刪除記錄後,如何更新原來的頁面的資料

程式碼中:

1)id=“chkSelectAll”用於全選 複選框

2)id=chkSet 用於單行的複選框

3)id=“h_unique_id”用於找到該行對應的資料庫的Id

2。在程式的JS程式碼中,我們把重要的方法拿出來說明:

C# 透過AJAX刪除記錄後,如何更新原來的頁面的資料

1)在頂部,找到表格class名為table_style_2,td裡的checkbox控制元件,如果沒有checked,則忽略。否則就透過find方法找到id的值,並存入uniqueIds中

接著呼叫Ajax進行批次刪除。

2)如果不成功則彈出出錯資訊,如果成功,這裡呼叫伺服器控制元件生成的ID的控制,去模擬查詢點選事情。

至此,就實現了批次刪除在前端更新資料的功能。