zoukankan      html  css  js  c++  java
  • $.ajax防止多次点击重复提交的方法

    第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法:
    $.ajaxPrefilter()方法 :是对全局所有的ajax请求有效,在所有的ajax请求之前,会对每一个请求统一做一些处理,可以去设置ajax的选项,也可以对现有的ajax选项进行更改;

    接收两个参数:

    dataTypes :可选参数,一个可选的字符串,其中包含一个或多个空格分隔的数据类型;

    handler(options, originalOptions, jqXHR):一个函数,接收三个参数。

    各个参数的含义:

    options : 是请求的选项,包括accepts、crossDomain、contentType、url、async、type、headers、error、dataType等许多参数选项

    originalOptions : 值作为提供给Ajax方法未经修改的选项,因此,没有ajaxSettings设置中的默认值

    jqXHR :就是经过jQuery封装的XMLHttpRequest对象(保留了其本身的属性和方法)

    代码如下:

    $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
      if ( options.abortOnRetry ) {
        if ( currentRequests[ options.url ] ) {
          currentRequests[ options.url ].abort();
        }
        currentRequests[ options.url ] = jqXHR;
      }
    });

    第二种:使用beforeSend选项,在发送请求前将提交按钮变为不可用的状态;

    上面的第一种方法是针对所有的ajax请求,而这一种针对的是单个的请求;

    在点击过一次提交后,在提交完成前都将提交按钮不可用,这样就避免掉了重复点击的问题

    $.ajax({
        url:'testurl',
        beforeSend:function(){
            $('.submit').attr('onclick','javascript:void();');
        },
        success:function(data){
            $('.submit').removeAttr('onclick')
        },
        error:function(){
            $('.submit').removeAttr('onclick')
        }
    })
    
  • 相关阅读:
    获取具有指定扩展数据的所有实体的Id,并存入Id数组中
    FastDFS单机版安装教程
    Git简要开发流程
    Delay延迟队列
    HTTP调用接口方法
    Tomcat为什么要使用Facde模式对Request对象进行包装?
    SpringBoot注解
    <th:>标签使用
    Git命令速查表
    IDEA中对Git的常规操作(合并,提交,新建分支,更新)
  • 原文地址:https://www.cnblogs.com/qiao20/p/11081804.html
Copyright © 2011-2022 走看看