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.判斷該鎖是否開啟,如果是關閉的,則直接返回//提交 $('.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 () {
當然,這些處理方式只能針對簡單的無風險的業務進行處理,有道是任何只在前端的限制都是耍流氓,如果涉及安全及有風險存在時,我們還是需要在後臺進行相應的處理,即可以用攔截器來實現攔截,具體實現請待以後更新。
以上內容如有不當之處,歡迎指正。
相關推薦
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層之上可靠的傳遞資料包