首页 > 其他分享 >Ajax的beforeSend

Ajax的beforeSend

时间:2023-07-27 16:22:36浏览次数:37  
标签:function error ajax Ajax beforeSend 按钮 data

jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。
具体可参考jQuery官方文档:

http://api.jquery.com/Ajax_Events/

 

防止重复数据

在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.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);
    }
});

 

标签:function,error,ajax,Ajax,beforeSend,按钮,data
From: https://www.cnblogs.com/Fooo/p/17585279.html

相关文章

  • java后台接收ajax发送的参数
    1、前台发送数据到服务端,以及接受后台数据前台发送数据到服务端,有两种方法:(1)使用表单发送同步请求      参数inputStr:   参数intputInt:(2)使用ajax发送异步请求,发送的数据为json对象      参数username:      参数password:<scriptt......
  • Ajax简介与技术实现
    Ajax:(也写为AJAX读作/ˈeɪdʒæks/或阿贾克斯.“AsynchronousJavaScriptandXML”(异步JavaScript和XML)的缩写)是一组Web开发技术,它使用客户端上的各种Web技术来创建异步web应用程序.使用Ajax,Web应用程序可以异步(在后台)从服务器发送和检索数据,而不会干扰现有页面的显示和行为......
  • Ajax详解
    参考:1.https://blog.csdn.net/Oriental_/article/details/1048637622.https://zhuanlan.zhihu.com/p/486617234......
  • 关于ajax框架
    http://demo.dwzjs.com/#page3dwz和java整合http://code.google.com/p/dwz4j/jqueryuihttp://forum.jquery.com/using-jquery-uihttp://jqueryui.com/demos/dwzdemohttp://demo.dwzjs.comstruts整合jqueryhttp://aswang.iteye.com/blog......
  • Ajax 上传图片转Android
    Ajax上传图片转Android实现流程对于刚入行的小白来说,实现"Ajax上传图片转Android"可能会感到困惑。在本文中,我将向你展示实现这一功能的步骤,并提供每一步所需的代码和解释。1.流程概述下表展示了实现"Ajax上传图片转Android"的流程。步骤描述1.选择图片文件并上传......
  • JavaScript jQuery 比对示例,ajax示例
    js教程:https://www.w3school.com.cn/js/index.aspjQuery教程:https://www.w3school.com.cn/jquery/index.asp以下是部分代码示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>javascript</t......
  • AJAX学习
    url统一资源定位符协议://域名/资源路径从服务器获取数据案例:根据输入省份城市名字查询市区 <scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>   <script>     functionfn(){       letpName=document.querySel......
  • 如何使用AJAX实现JavaScript文件下载
    如何使用AJAX实现JavaScript文件下载AJAX(AsynchronousJavaScriptandXML)技术是一种通过JavaScript异步地向服务器发送请求,更新网页内容的技术。在Web开发中,AJAX是非常常用的技术之一,它可以使网页交互更加流畅,也可以实现一些复杂的交互操作。本文将介绍如何使用AJAX实现JavaScri......
  • Ajax基础
    1.全局刷新和局部刷新B/S结构项目中,浏览器(Browse)负责把用户的请求和参数通过网络发送给服务器(Server),服务端使用Servlet(多种服务端技术的一种)接收请求,并将处理结果返回给浏览器。浏览器在html,jsp上呈现数据,混合使用css,js帮助美化页面,或响应事件。1.1全局刷新全......
  • ajax
    ajax作用:可以实现异步交互的请求        在不新加载网页的情况下能加载其它内容  一、导入springmvc的依赖包   springmvc.XML文件配置也就是applicationContext.XML如下:<?xmlversion="1.0"encoding="UTF-8"?><beansxmlns="http://www.spring......