1. 程式人生 > >ajax非同步請求防止重複提交的方法

ajax非同步請求防止重複提交的方法

  JS通過ajax發起非同步請求時,經常會出現一個按鈕快速多次點選時,請求進行了多次提交,可能導致很多不必要的問題出現,比如寫入某些髒資料等。

  此處針對ajax發起請求多次提交的問題進行JS程式碼處理的簡單方法有如下兩種:

1、定義lock(鎖)機制:

//提交 var lock = true;//防止重複提交定義鎖 $('.saveRemark').click(function(){ var noticeType = $('select[name="noticeType"]').val(); var noticeTitle = $('input[name="noticeTitle"]').val(); if(noticeType == ''){ $('.change').find('p').html('請選擇公告型別!'); $('.change').show(); return; } if(noticeTitle == ''){ $('.change').find('p').html('請輸入公告標題!'); $('.change').show(); return; } var noticeStatus = $(this).attr('noticeStatus'); $('input[name="noticeStatus"]').val(noticeStatus); var form = $('#userQueryForm'); if(!lock){// 2.判斷該鎖是否開啟,如果是關閉的,則直接返回
return false; } lock = false ; //3.進來後,立馬把鎖鎖住 $.ajax({ type: 'post', url: '/manage/noticeInsertDO.htm?date='+new Date(), data : form.serialize(), success: function(res) { if(res.code == 1){ $('.actionResult').find('p').html(res.msg); $('.actionResult').show(); }else{ $('.change').find('p').html(res.msg); $('.change').show(); lock = true;//如果業務執行失敗,修改鎖狀態
} } }); return false; }); 2、 定義使用ajax的beforeSend: function () { //此處可選擇方式,如移除屬性等。 }, 如下例子:
//提交 $('.saveRemark').click(function(){ var noticeType = $('select[name="noticeType"]').val(); var noticeTitle = $('input[name="noticeTitle"]').val(); if(noticeType == ''){ $('.change').find('p').html('請選擇公告型別!'); $('.change').show(); return; } if(noticeTitle == ''){ $('.change').find('p').html('請輸入公告標題!'); $('.change').show(); return; } var noticeStatus = $(this).attr('noticeStatus'); $('input[name="noticeStatus"]').val(noticeStatus); var form = $('#userQueryForm'); $.ajax({ type: 'post', url: '/manage/noticeInsertDO.htm?date='+new Date(), data : form.serialize(), beforeSend: function () {
// 移除屬性,避免選擇器再選擇,防止重複提交。 $(".saveRemark").removeAttr("class"); }, success: function(res) { if(res.code == 1){ $('.actionResult').find('p').html(res.msg); $('.actionResult').show(); }else{ $('.change').find('p').html(res.msg); $('.change').show(); } } }); return false; });

當然,這些處理方式只能針對簡單的無風險的業務進行處理,有道是任何只在前端的限制都是耍流氓,如果涉及安全及有風險存在時,我們還是需要在後臺進行相應的處理,即可以用攔截器來實現攔截,具體實現請待以後更新。

以上內容如有不當之處,歡迎指正。

相關推薦

ajax非同步請求防止重複提交方法

  JS通過ajax發起非同步請求時,經常會出現一個按鈕快速多次點選時,請求進行了多次提交,可能導致很多不必要的問題出現,比如寫入某些髒資料等。   此處針對ajax發起請求多次提交的問題進行JS程式碼處理的簡單方法有如下兩種: 1、定義lock(鎖)機制: //提交 v

jQuery的$ .ajax防止重複提交方法

  沒啥說的直接貼程式碼,很簡單: 第一種方式:的onclick點選事件型別 <SCRIPT> function member_del(obj,id){ var lock = false; //預設未鎖定 layer.confirm('確

Jquery的$.ajax防止重複提交方法

1、第一種,對於onclick事件觸發的的ajax 可以採用如下方法: 即在beforeSend中使點選按鈕不可用,ajax結果返回後置為可用 $.ajax( { type: 'POST', url: APP+

ajax非同步請求關鍵字提示(適用於註冊使用者時顯示已註冊使用者,避免重複

1.前端程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>staff_insert.html</title&

Python爬蟲處理JS翻頁的一種方法,利用Ajax非同步請求

前端方面知識不是很好,只是想解決有關Python爬蟲翻頁的問題 =。=  如有不對,還望指正 瀏覽器:Google 利用區域性更新這種翻頁的方式,同樣需要進行一個url請求,因此我們的目的就是找到這個url 1.分析 如圖所示,頁面翻頁採用了JS的方法 &nb

jQuery Ajax 非同步請求data引數資料格式的六種方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>

ajax 防止重複提交資料

 防止資料重複提交 在實際專案開發中,提交表單時常常由於網路或者其原因,使用者點選提交按鈕誤認為自己沒有操作成功,進而會重複提交按鈕操作次數,如果頁面前端程式碼沒有做一些相應的處理,通常會導致多條同樣

form表單防止重複提交方法

會引起表單重複提交的情況:f5重新整理頁面, 點選瀏覽器後退,重複點選提交按鈕前臺:1. 提交後按鈕置灰,或者新增蒙板2. PRG模式,表單提交後,redirect到一個倒計時頁面,或者資訊提示頁面,等有成功資訊返回後,再跳轉回之前頁面。3. js中設定標記為判斷後臺:1 s

spring mvc 防止重複提交表單的兩種方法,推薦第二種

第一種方法:判斷session中儲存的token 比較麻煩,每次在提交表單時都必須傳入上次的token。而且當一個頁面使用ajax時,多個表單提交就會有問題。 註解Token程式碼: package com.thinkgem.jeesite.common.re

Vue form 表單提交+ajax非同步請求+分頁

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

jquery a標籤不可點選,繫結bind/解除unbind點選,ajax防止重複提交

方法1 (繫結bind/解除unbind點選): <a href="javascript:void(0)" id="dianji">點選</a> <br/><

PHP防止表單重複提交方法

下面的情況就會導致表單重複提交:       點選提交按鈕兩次。       點選重新整理按鈕。       使用瀏覽器後退按鈕重複之前的操作,導致重複提交表單。       使用瀏覽器歷史記錄重複提交表單。       瀏覽器重複的HTTP請求。      

ajax非同步請求的get方法和post方法簡單使用

GET請求方法: function checkname(){ //ajax方式校驗使用者名稱 //A. 獲得被校驗的使用者名稱資訊 var nm = document.getE

ajax非同步請求提交上傳圖片表單並預覽圖片

一、表單上傳檔案必須加上enctype="multipart/form-data",(以下是上傳檔案的表單) <form action="<%=basePath%>UploadImage" method="post" id="uploadForm" en

非同步提交Form資料時防止重複提交外掛clockSubmit

clockSubmit V2.0這是一個防止重複非同步提交Form表單的小外掛;<script src="clockSubmit.js"></script>呼叫方式://多次點選新增按鈕 $("add").click(function(){ //

表單防止頁面重複提交方法

使用者在操作表單資料時往往會出現表單資料重複提交的問題,尤其實在Web開發中此類問題比較常見。重新整理頁面,後退操作以前的頁面,單機多次按鈕都會導致資料重複提交。此類問題是因為瀏覽器重複提交HTTP請求導致。    下面簡單介紹以防止表單資料重複提交的四種解決方案。 一、在

ajax 非同步請求返回只重新整理一次頁面

success:function (res) { if (res == "ok") { // $('#dg').bootstrapTable(('refresh')); if (location.href.indexOf("#reloade

springMvc 攔截器 防止重複提交

1.DispatcherServlet     SpringMVC具有統一的入口DispatcherServlet,所有的請求都通過DispatcherServlet。     DispatcherServlet是前置控

ajax非同步請求返回的是字串問題

1.返回結果差異 js獲取後列印res.code無結果。因為返回資料格式不正確。 php檔案新增header頭: header('Content-Type:application/json;'); 或者。j s 新增 contentType: "application/j

Http協議與表單防止重複提交實戰解決方案

http長連線與短連線 HTTP協議與TCP/IP協議的關係 HTTP的長連線和短連線本質上是TCP長連線和短連線。HTTP屬於應用層協議,在傳輸層使用TCP協議,在網路層使用IP協議。IP協議主要解決網路路由和定址問題,TCP協議主要解決如何在IP層之上可靠的傳遞資料包