1. 程式人生 > >使用js進行防止重複提交

使用js進行防止重複提交

jQuery是經常使用的一個開源js框架,其中的$.ajax請求中有一個beforeSend方法,用於在向伺服器傳送請求前執行一些動作。
具體可參考jQuery官方文件:http://api.jquery.com/Ajax_Events/

$.ajax({
    beforeSend: function(){
     // Handle the beforeSend event
    },
    complete: function(){
     // Handle the complete event
    }
    // ......
});

防止重複資料

在實際專案開發中,提交表單時常常由於網路或者其原因,使用者點選提交按鈕誤認為自己沒有操作成功,進而會重複提交按鈕操作次數,如果頁面前端程式碼沒有做一些相應的處理,通常會導致多條同樣的資料插入資料庫,導致髒資料的增加。要避免這種現象,在$.ajax請求中的beforeSend方法中把提交按鈕禁用掉,等到Ajax請求執行完畢,在恢復按鈕的可用狀態。

舉個例子:

// 提交表單資料到後臺處理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按鈕防止重複提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success"
) { //清空輸入框 clearBox(); } }, complete: function () { $("#submit").removeAttr("disabled"); }, error: function (data) { console.info("error: " + data.responseText); } });

模擬Toast效果

ajax請求伺服器載入資料列表時提示loading(“載入中,請稍後...”),

$.ajax({
    type
: "post", contentType: "application/json", url: "/Home/GetList", beforeSend: function () { $("loading").show(); }, success: function (data) { if (data == "Success") { // ... } }, complete: function () { $("loading").hide(); }, error: function (data) { console.info("error: " + data.responseText); } });

相關推薦

使用js進行防止重複提交

jQuery是經常使用的一個開源js框架,其中的$.ajax請求中有一個beforeSend方法,用於在向伺服器傳送請求前執行一些動作。 具體可參考jQuery官方文件:http://api.jquery.com/Ajax_Events/ $.ajax({ beforeSend: function

前端頁面js防止重複提交表單

1.第一個方法是我自己想的,就是設定submit按鈕屬性為disabled,然後當後臺請求成功移除這個屬性。 2.第二個是一個面試官告訴我的,我個人覺得和我第一個異曲同工,就是在點選的時候加一個class屬性,然後js判定是否有這個class,如果有的話不再重複提交, 後臺

springMvc 攔截器 防止重複提交

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

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

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

自定義註解 防止重複提交

定義註解 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.a

防止重複提交表單-思路

防止重複提交表單 $c =md5(serialize($this->request->request())); $find = session($c); if($find){ if($find['expire']+2-time()>=0){ re

ajax 防止重複提交資料

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

防止重複提交

package web1; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.security.MessageDigest; i

vue+element-自定義指令,防止重複提交

全域性directive的寫法 // 提交以後禁用按鈕一段時間,防止重複提交 import Vue from 'vue'; Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('clic

jQuery實現載入中效果,防止重複提交

//匯出表格載入中的提示var dian=0;//控制'●'的個數var t=null;//停止時使用function id_loadspot(loadspotSpan,loadingDiv,exportLink){   loadingDiv.css('visibility','visible');//顯示

記一次 thinkphp5令牌驗證防止重複提交表單

因為專案需要表單提交,可是發現了必須要防止使用者提交,經過了幾個小時的百度旅遊總算找到的方法,其實說到底還是看官方手冊來的頭緒,以後看來要多看。。。。。。。 其實好像就是驗證器中加入token的驗證而已,擼程式碼吧 首先在html的from中加入下列程式碼,其實官方手冊有說明的 {:token()

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

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

form表單防止重複提交的方法

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

SpringMVC使用poi上傳Excel讀取Excel例項(包含防止重複提交

1、頁面 <span style="font-size:18px;"><%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

redis防止重複提交

// // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler) // package com.pt.platform.core.redis.lock; impor

表單防止重複提交處理的前後臺兩種處理方式

方法一:session中控制:jsp頁面: //設定標誌變數SubmitFlag值 session.putValue("SubmitFlag","complaint_add.jsp");control層:  public String addxxx(){ Strin

jsp防止重複提交的3種辦法(轉)

  1 javascript ,設定一個變數,只允許提交一次。 <script language="javascript"> var checkSubmitFlg = false; function checkSubmit() { if (checkSubmitFlg

JSP 防止重複提交 防止重複重新整理 防止後退問題以及處理方式

一。前言你在任何一個比較專業的BBS都會看到這樣的問題,即使你Google一下,也會發現有很多的人在關注和詢問,但大家給出的解決方法卻都是千差萬別,(有的人主張採用指令碼來解決;有的則想重定向到別的頁面;有的則將此問題提升到Token的角度)為什麼會有如此大的差異呢? 二。問題場景首先,我們應該先了解為什麼

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

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

springmvc 攔截器 防止重複提交表單

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