文档章节

巧用Ajax的beforeSend 提高用户体验

zwjjap
 zwjjap
发布于 2016/06/17 10:22
字数 352
阅读 79
收藏 12
点赞 0
评论 0

        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);
    }
});

 

本文转载自:http://www.cnblogs.com/fanyong/p/3883670.html

共有 人打赏支持
zwjjap
粉丝 13
博文 121
码字总数 21945
作品 0
武汉
程序员
jquery ajax设置header的两种方式

一、setting参数 headers $.ajax({ }); 二、beforeSend方法 $("#test").click(function() {

miaojiangmin ⋅ 04/12 ⋅ 0

EDM营销如何运用社交媒体

“微信指数”横空出世,瞬间刷爆移动互联网以及各大朋友圈。社交媒体的影响力远超出其本身存在的意义。如何巧用社交媒体进行传播,早已成了EDM营销人不断研究的经典问题之一。 作为引流以及培...

EDMyingxiao ⋅ 2017/04/15 ⋅ 0

jQuery中Ajax事件

Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配。 $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complet...

zsj2018 ⋅ 2009/09/24 ⋅ 0

jquery的ajax全局事件详解—明河谈jquery

jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板: $.ajax({ type: "get", url: "", data : {}, beforeSend : function(){ }, success : function(data){ }, compl......

dhole ⋅ 2013/02/04 ⋅ 0

如何拦截或修改原生ajax请求

jQuery已经实现了各种 ajax 事件,如 beforeSend 等,但原生的 XMLHttpRequest 并没有这种事件。在没有用 jQuery的情况下,如果想修改 ajax 请求,得做一些特殊的处理。以下是我处理的方法:...

lovebing ⋅ 2015/03/30 ⋅ 3

javascript设置http请求的头信息

$("#test").click(function() { $.ajax({ type: "GET", url: "default.aspx", beforeSend: function(request) { request.setRequestHeader("Test", "Chen...

1987times ⋅ 2014/03/27 ⋅ 0

用 jQuery.ajaxSetup 实现对请求和响应数据的过滤

不知道同学们在做项目的过程中有没有相同的经历呢?在使用 ajax 的时候,需要对请求参数和响应数据进行过滤处理,比如你们觉得就让请求参数和响应信息就这么赤裸裸的在互联网里来回的穿梭,比...

llljj96 ⋅ 2017/05/23 ⋅ 0

【ajax】 $.ajax()的基本用法

代码模版: $.ajax({ type: "POST", url: "/login", contentType: 'application/x-www-form-urlencoded;charset=utf-8', data: {username:$("#username").val(), password:$("#password").va......

林元煌 ⋅ 2017/09/19 ⋅ 0

jquery小问题求教

在用ajax发送请求时 $.ajax();里哪项选项里 有 服务器 返回的0,1,2,3信息 beforeSend:function (xhr) { alert(xhr.readyState); if(xhr.readyState<4) alert("查询中"); }, complete:functio......

hphper ⋅ 2013/10/08 ⋅ 1

asp.net+ajax+json来实现无刷新分页功能

现在做网站就是尽可能的提高用户体验,用户浏览网站尽可能不要刷新,响应速度尽可能的快,就是加载速度不好,也要告诉用户你已经很努力的在加载了(loading.....),下面来看看如何实现此功能 ...

阿拉赛 ⋅ 2012/06/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Greys Java在线问题诊断工具

Greys是一个JVM进程执行过程中的异常诊断工具。 在不中断程序执行的情况下轻松完成JVM相关问题排查工作 目标群体 有时候突然一个问题反馈上来,需要入参才能完成定位,但恰恰没有任何日志。回...

素雷 ⋅ 18分钟前 ⋅ 0

git从远程仓库拉取代码的常用指令

一种(比较麻烦的)拉代码的方法 git clone //克隆代码库,与远程代码库的主干建立连接,如果主干已经在就不用再clone啦,克隆路径为当前路径下的新创建的文件夹 git checkout -b //本地建立...

Helios51 ⋅ 32分钟前 ⋅ 0

005. 深入JVM学习—Java堆内存参数调整

1. JVM整体内存调整图解(调优关键) 实际上每一块子内存区域都会存在一部分可变伸缩区域,其基本流程:如果内存空间不足,则在可变的范围之内扩大内存空间,当一段时间之后,内存空间不紧张...

影狼 ⋅ 37分钟前 ⋅ 0

内存障碍: 软件黑客的硬件视图

此文为笔者近日有幸看到的一则关于计算机底层内存障碍的学术论文,并翻译(机译)而来[自认为翻译的还行],若读者想要英文原版的论文话,给我留言,我发给你。 内存障碍: 软件黑客的硬件视图...

Romane ⋅ 今天 ⋅ 0

SpringCloud 微服务 (七) 服务通信 Feign

壹 继续第(六)篇RestTemplate篇 做到现在,本机上已经有注册中心: eureka, 服务:client、order、product 继续在order中实现通信向product服务,使用Feign方式 下面记录学习和遇到的问题 贰 or...

___大侠 ⋅ 今天 ⋅ 0

gitee、github上issue标签方案

目录 [TOC] issue生命周期 st=>start: 开始e=>end: 结束op0=>operation: 新建issueop1=>operation: 评审issueop2=>operation: 任务负责人执行任务cond1=>condition: 是否通过?op3=>o......

lovewinner ⋅ 今天 ⋅ 0

浅谈mysql的索引设计原则以及常见索引的区别

索引定义:是一个单独的,存储在磁盘上的数据库结构,其包含着对数据表里所有记录的引用指针. 数据库索引的设计原则: 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索...

屌丝男神 ⋅ 今天 ⋅ 0

String,StringBuilder,StringBuffer三者的区别

这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面。 首先说运行速度,或者说是, 1.执行速度 在这方面运行速度快慢为:StringBuilder(线程不安全,可变) > StringBuffer...

时刻在奔跑 ⋅ 今天 ⋅ 0

java以太坊开发 - web3j使用钱包进行转账

首先载入钱包,然后利用账户凭证操作受控交易Transfer进行转账: Web3j web3 = Web3j.build(new HttpService()); // defaults to http://localhost:8545/Credentials credentials = Wallet......

以太坊教程 ⋅ 今天 ⋅ 0

Oracle全文检索配置与实践

Oracle全文检索配置与实践

微小宝 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部