用于在向服务器发送请求前添加一些处理函数。例如:搜寻附近店铺,未搜寻出来的时候显示:正在搜寻中...

常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。

代码如下:

function test_ajax(){
   $.ajax(
   {
      type:"GET",//通常会用到两种:GET,POST。默认是:GET
      url:"a.php",//(默认: 当前页地址) 发送请求的地址
      dataType:"html",//预期服务器返回的数据类型。
      beforeSend:beforeSend, //发送请求
      success:callback, //请求成功
      error:error,//请求出错 
      complete:complete//请求完成
   });
}
function error(XMLHttpRequest, textStatus, errorThrown){
  // 通常情况下textStatus和errorThown只有其中一个有值 
  $("#showResult").append("<div>请求出错啦!</div>");
}
function beforeSend(XMLHttpRequest){
  $("#showResult").append("<div><img src='loading.gif' /><div>");
}
function complete(XMLHttpRequest, textStatus){
  $("#showResult").remove();
}
function callback(msg){
  $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");
}
 

防止重复数据
在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态。

举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 提交表单数据到后台处理
$.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(“加载中,请稍后...”),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.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);
  }
});

方法beforeSend,用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件,在ajax请求开始之前就被触发,通常允许用户修改XMLHttpRequest对象(比如说设置附加的头部信息),关于ajax事件的解释可参考文档:http://docs.jquery.com/Ajax_Events

我们还见到一种情况,很多网站在加载内容的过程中给出“数据加载中,请稍候”的提示,当内容被加载完毕后显示内容。可以设置默认文本显示为加载中的提示,当内容加载完毕时,我们可以通过ID选择器,将该标签中的文本替换成最终的内容。以此来取代beforeSend,效率更高。

什么时候用beforeSend,什么时候用文本替换,取决于ajax请求前后你所展示的DOM元素是否一致,如果你所展示的DOM元素在请求之前已经存在,那么通过上述文本替换的方式来处理会好些,如果除此以外你还需增加其他的需求,那么还是用beforeSend来处理吧。

jq ajax之beforesend(XHR)的更多相关文章

  1. 关于jq ajax封装以及error的报错参数

    jq的ajax完整版本 $.ajax({ url: "GetCityByPId.ashx", data: {pId:pid}, dataType: "JSON" ...

  2. 关于jq ajax封装以及ajax上传Webapi

    jq的ajax完整版本 $(function () {     fileChange(); }); function fileChange() {     $('#fileinput').change ...

  3. 前段开发 jq ajax数据处理详细讲解。

    定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 常用的ajax结构模板: function indes(){ $.ajax({ url: '', type: "GET&qu ...

  4. jQuery中Ajax事件beforesend及各参数含义1

    jQuery中Ajax事件beforesend及各参数含义 转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有 ...

  5. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  6. Ajax的beforeSend

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

  7. 巧用Ajax的beforeSend 提高用户体验--防止重复数据

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

  8. jq ajax封装

    //ajax公共方法,zs 2017-06-14 $.extend({ //比jq的ajax多了的参数: //salert是否在请求成功后弹出后台的SuressStr字段值 //ealertStr:请 ...

  9. jQuery中Ajax事件beforesend及各参数含义

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

随机推荐

  1. 201621123080 《Java程序设计》第2周学习总结

    Week02-Java基本语法与类库 1. 本周学习总结 本周主要学习了java的数据类型.运算符,String类,java的简单输入输出与流程控制. 在做题上对String和数组的理解与区分仍不够深 ...

  2. H5(一)H5与HTML、XHTML的不同

    一.基本概念 html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上 ...

  3. Python中的列表(1)

    1.什么是列表? 列表是由一组按特定顺序排列的元素组成. 2.如何表示? 在Python中用方括号([ ])来表示列表.栗子如下: contries = ['China','England','Fra ...

  4. Java-basic-4-数据类型

    Number类 装箱:将内置数据类型作为包装类对象使用:拆箱:相反 public class test{ public static void main(String args[]) { // box ...

  5. JAVA基础篇—Servlet小结

    一.get请求和post请求的区别: 1.get请求是通过url传递参数,post请求是通过请求体传递参数的 2.get请求最多允许传递255个字符,对长度有限制,所以数据比较大的时候我们使用post ...

  6. LeetCode(117) Populating Next Right Pointers in Each Node II

    题目 Follow up for problem "Populating Next Right Pointers in Each Node". What if the given ...

  7. 欧拉函数:HDU1787-GCD Again(欧拉函数的模板)

    GCD Again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  8. CDH4 journalnode方式手工安装手册之三

    一.                                启动JournalNode 每台机器都要执行: mkdir -p /smp/hadoop-cdh4/bch/ chmod -R 77 ...

  9. 关于面试总结-SQL学生表

    前言 每次面试必考SQL,小编这几年一直吃SQ的亏,考题无非就是万年不变学生表,看起来虽然简单,真正写出来,还是有一定难度.于是决定重新整理下关于SQL的面试题,也可以帮助更多的人过SQL这一关. 作 ...

  10. Leetcode 421.数组中两数的最大异或值

    数组中两数的最大异或值 给定一个非空数组,数组中元素为 a0, a1, a2, … , an-1,其中 0 ≤ ai < 231 . 找到 ai 和aj 最大的异或 (XOR) 运算结果,其中0 ...