http://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_ajaxstart ajax loading .......
http://www.tuicool.com/articles/qaaqei
http://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_ajaxstart ajax loading .......
http://www.tuicool.com/articles/qaaqei
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").ajaxStart(function(){
$(this).html("<img src='/i/demo_wait.gif' />");
});
$("button").click(function(){
$("div").load("/example/jquery/demo_ajax_load.asp");
});
});
</script>
</head>
<body>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>
</body>
</html>
2
<div id="article_content" class="article_content"><p><script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#loading_img").click(
function()
{
$.ajax({
type:"GET",url:"demo.PHP",data:"name=wuxiaoyong",beforeSend:loading,//执行ajax前执行loading函数.直到success
success:Response //成功时执行Response函数
})
}
)
});
function loading(){
$('#loading_img').html('<img src="images/loading.gif"/>');
}
function Response(data){
$('#loading_img').html(data);
}
</script>
<div id="loading_img">点击加载</div></p> </div><div data-bd-bind="1441865064974" class="bdsharebuttonBox bdshare-button-style0-16" style="float: right;"></div> 3 <h1><span class="link_title"><a target=_blank href="http://blog.csdn.net/lhzjj/article/details/8102984">jquery的ajax提交时“加载中”提示的处理方法 </a></span></h1>
<div><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,255,255); margin:0px; padding-left:0px; padding-right:0px; font-family:'Microsoft Yahei',微软雅黑,Tahoma,Arial,Helvetica,sTHeiti; font-size:14px; padding-top:0px"><strong>方法1：使用ajaxStart方法定义一个全局的“加载中。。。”提示</strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong>$(function(){
<wbr><wbr><wbr><wbr>$("#loading").ajaxStart(function(){
<wbr><wbr><wbr><wbr><wbr><wbr> <wbr>$(this).html.("<img src='/jqueryStu/images/loading.gif' />");
<wbr><wbr><wbr><wbr> <wbr>});
<wbr><wbr><wbr><wbr> <wbr>$("#loading").ajaxSuccess(function(){
<wbr><wbr><wbr><wbr><wbr><wbr> <wbr>$(this).html.("");
<wbr><wbr><wbr><wbr><wbr><wbr> <wbr>// $(this).empty(); // 或者直接清除
<wbr><wbr><wbr><wbr> <wbr>});</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong>}）;</strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong><div id="loading"></div></strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong>注意：</strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px">所有的ajax提交都会触发ajaxStart事件，都会在你定义的</p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px">位置上显示“加载中。。。”的图标（当然你也可以定义文字，但是一个加载中的图片比较好看）；</p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px">-------但是一定要注意，同时要定义好ajaxSuccess事件，ajax提交成功后把这个图标隐藏起来！！！</p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><wbr></wbr></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><u><strong>特别提示：</strong></u></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px">使用ajaxStart或ajaxSuccess事件时，相当于<strong>定义了一个全局的显示“加载中。。。”的位置</strong>，所有ajax提交时候“加载中。。。”的图标都<strong>始终显示在一个位置</strong>！！！！</p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong>方法2：在ajax方法中定义任意位置显示的“加载中。。。”提示</strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong>$('#ajax_test2').click(function(){
<wbr><wbr><wbr><wbr><wbr>$.ajax({
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>url ----<wbr>url路径，根据你需要些啦,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> type:'post',<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> data:'name=ZXCVB',<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <wbr>timeout:15000,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> beforeSend:function(XMLHttpRequest){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <wbr>//alert('远程调用开始...');
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("#loading").html.("<img src='/jqueryStu/images/loading.gif' />");
<wbr><wbr><wbr><wbr><wbr><wbr><wbr> <wbr>},<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> success:function(data,textStatus){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> alert('开始回调，状态文本值：'+textStatus+' 返回数据：'+data);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>// $("#loading").empty();
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <wbr>},<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> complete:function(XMLHttpRequest,textStatus){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> // alert('远程调用成功，状态文本值：'+textStatus);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("#loading").empty();
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <wbr>},<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> error:function(XMLHttpRequest,textStatus,errorThrown){
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <wbr>alert('error...状态文本值：'+textStatus+" 异常信息："+errorThrown);
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>$("#loading").empty();
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }
<wbr><wbr><wbr><wbr><wbr><wbr> });
<wbr><wbr><wbr><wbr>});</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px"><strong>< input type.="button" id="ajax_test2" value="Ajax方式">
<wbr><wbr><div id="loading"></div></wbr></wbr></strong></p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px">很明显，在beforeSend时，在指定的位置显示“加载中。。。”图标，在<strong>error、complete、success</strong>后把该图标移除掉！！！！</p><p style="padding-bottom:0px; line-height:normal; background-color:rgb(255,sTHeiti; font-size:14px; padding-top:0px">页面有多个ajax提交时候，建议使用第二种方式，因为“加载中。。。”图标可以显示在<strong>任意你需要刷新的位置</strong>上！！！！！这就是它的优势：自由呀！！！！</p></div>
原文链接：https://www.f2er.com/ajax/162928.html