jq Ajax请求中显示Loading...

最新推荐文章于 2025-05-14 15:09:53 发布

吱一枝

最新推荐文章于 2025-05-14 15:09:53 发布

阅读量849

点赞数 1

CC 4.0 BY-SA版权

文章标签： ajax jq

本文链接：https://blog.youkuaiyun.com/weixin_41856301/article/details/84552858

本文详细介绍如何使用jQuery和Ajax实现网页元素的动态加载效果，包括显示加载图标、处理请求超时、请求成功和失败后的处理流程。通过具体代码示例，读者可以学习到如何在按钮点击事件中触发Ajax请求，并在请求过程中展示和隐藏加载提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

	<div id="loading">
		<img src='/jquery/images/loading.gif' />
	</div>
	< input type="button" id="btn" value="请求">

JS

$('#btn').click(function(){
     $.ajax({
          url ---- ，根据你需要设置url路径
          type:'post',
          data:'name=Test',
          timeout:15000,
          beforeSend:function(XMLHttpRequest){
              $("#loading").show();     // 数据加载成功之前，显示loading...
         },
         success:function(data,textStatus){
              $("#loading").hide();     // 成功后，隐藏loading...
           },
          complete:function(XMLHttpRequest,textStatus){
              // alert('远程调用成功，状态文本值：'+textStatus);
             $("#loading").hide();
           },
           error:function(XMLHttpRequest,textStatus,errorThrown){
             $("#loading").hide();   // 失败后，隐藏loading...，重新加载...
              if(status == 'timeout') {
                    xhr.abort();    // 超时后中断请求
                    $.alert("网络超时，请刷新", function () {
                        location.reload();
                    })
                }
          }
       });
    });