jquery中的全局事件

ajaxStart(callback)：Ajax请求开始时触发该事件

ajaxSend(callback)：Ajax请求发送前触发该事件

ajaxSuccess(callback)：Ajax请求成功时触发该事件

ajaxComplete(callback)：Ajax请求完成时触发该事件

ajaxStop(callback)：Ajax请求结束时触发该事件

ajaxError(callback)：Ajax请求出现错误时触发该事件

可以对 jQuery 对象调用上述全局事件。

例如，当用户点击页面上某一按钮请求数据时，在页面上显示 loading... ，页面加载完成后隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxStartAjaxStop</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("#loading").hide();$("#loading").ajaxStart(function(){$(this).show();});$("#loading").ajaxStop(function(){$(this).hide();});$("button[name='btnLoad']").click(function(){    $.get("http://www.sohu.com", null, function(data){$("#content").text(data);});});
});
</script>
<style type="text/css">
body{ padding:20px; }
textarea{ width:350px; height:120px; }
#loading{ background-color:#eee; border:solid 1px #999; margin:5px 0 10px; padding:5px; font-size:13px; }
</style>
</head><body><div id="loading">Loading.....</div>
<textarea id="content"></textarea>
<button name="btnLoad">Load</button></body>
</html>

直接利用$.ajaxSetup(options)方法统一设定所有$.ajax()方法中的参数。代码如下：

$.ajaxSetup({        //统一设置$.ajax()方法中的相同部分
type: "GET",//data: "user="+escape($("#user").val())+"&comment="+escape($("#comment").val()),beforeSend:function(){$("#target").html("<img src='loading.gif' /><br>正在载入…");}, error:function(){$("#target").html("<p>载入失败</p>");},success: function(data){     //第3个参数，回调函数，在请求完成后执行$("#target").html(data);}
});

也可以在ajax（）里面直接使用；

function Ajax(){
    $.ajax({type: "GET",url: "9-15.php",data: "user="+escape($("#user").val())+"&comment="+escape($("#comment").val()),   //escape()方法会将参数中的字符串编码成Unicode格式的字符串beforeSend:function(){            //发送请求之前$("#target").html("<img src='loading.gif' /><br>正在载入…");}, error:function(){$("#target").html("<p>载入失败</p>");},success: function(data){         //请求成功时$("#target").html(data);}});
}

9-15.php　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

header("Content-type: text/html; charset=gb2312");
$user=unescape($_GET['user']);
$comment=unescape($_GET['comment']);
for($i=1;$i<10000000;$i++);        //用于延时，以看到正在载入的图标
echo "<h3>评论人：".$user."</h3>";
echo "<p>内容：".$comment."</p>"

转载于:https://www.cnblogs.com/xs-yqz/p/5112484.html

jquery中的全局事件相关推荐

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jquery的ajax全局事件和AJAX 请求正在进行时显示“正在加载”
实例当 AJAX 请求正在进行时显示"正在加载"的指示: $("#txt").ajaxStart(function(){$("#wait" ...
javascript中的onpropertychange事件与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
jQuery中阻止hover事件冒泡
这里写自定义目录标题 jQuery中阻止hover事件冒泡前言冒泡示例冒泡效果阻止冒泡阻止冒泡效果总结 jQuery中阻止hover事件冒泡文章目录 jQuery中阻止hover事件冒泡 ...
jquery之ajax——全局事件引用方式以及各个事件(全局/局部)执行顺序
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSucce ...
深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
jQuery中的hover事件
在我们之前学习前端的过程中了解到了很多代码的作用,特别是js中所使用的方法,我之前也介绍过很多实用的js方法,今天要给大家介绍的是jQuery中的一个比较特殊的一个方法:hover(). 先前说过,我 ...
关于jQuery中的submit事件
submit事件:当提交表单时会发生. 通常submit事件的触发是通过按钮实现.按钮点击,触发函数,函数中实现submit功能. submit三个主要功能: 1.提交表单 //提交表单$('inpu ...

jquery中的全局事件

jquery中的全局事件相关推荐

最新文章

热门文章