文档章节

巧用Ajax的beforeSend 提高用户体验

zwjjap
 zwjjap
发布于 2016/06/17 10:22
字数 352
阅读 81
收藏 12

        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
博文 198
码字总数 21945
作品 0
武汉
程序员
Ajax等待返回结果时,弹出一个友好的等待提示

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

mCod
08/22
0
0
jquery ajax设置header的两种方式

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

miaojiangmin
04/12
0
0
jQuery中Ajax事件

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

zsj2018
2009/09/24
0
0
asp.net+ajax+json来实现无刷新分页功能

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

阿拉赛
2012/06/26
0
0
jquery的ajax全局事件详解—明河谈jquery

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

dhole
2013/02/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Oracle return exit continue

常在循环体中看到下面3种语句: return exit continue 举例说明 啥都没有 -- none begin for i in 1 .. 10 loop if i < 5 then dbms_output.put_line('i < 5, i = ' || to_char......

taadis
今天
3
0
JSONObject 转换时出错 InvocationTargetException

JSONObject 转换时出错java.lang.reflect.InvocationTargetException 一时看不出来是什么问题。 挺奇怪的。 百度参考了一下这个 网页的解决方案 说是类型不对,空? 仔细查看代码,果然是有一...

之渊
今天
3
0
no such module 'pop'问题

在github上 clone 了一个 swift 项目,编译时提示"no such module 'POP'"错误,查了一下居然是因为podfile中指定的最低版本是iOS 11.0,大于我测试手机的iOS版本10.3.3,将Podfile中的最低版...

yoyoso
今天
3
0
redis 系列一 -- 简介及安装

1.简介 redis -- remote dictionary server 远程字典服务 使用 C 语言编写; 高性能的 key-value数据库; 内存数据库,支持数据持久化。 Redis 是一个开源(BSD许可)的,内存中的数据结构存...

imbiao
今天
4
0
nginx log记录请求响应时间

有时为了方便分析接口性能等,需要记录请求的时长,通过修改nginx的日志格式可以做到,如 添加一个新的log_format log_format timed_combined '$remote_addr - $remote_user [$time_local] "...

swingcoder
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部