jQuery的ajax请求添加"加载中..."提示

    xiaoxiao2022-06-28  37

    主要实现功能:

    1、下拉加载数据时显示 “加载中…”​

    2、每次加载完后显示 “加载更多”​

    3、当所有数据加载完后

    页面显示

    <style type="text/css"> .video_list{padding:5% 2% 0;} .one_list a{display:-webkit-box;margin-bottom:4%;} .loading_box {font-size:16px; line-height:35px; color:#3e3a39; height:40px; text-align:center; padding:30px 0;margin-top:2px;position: absolute;top:40%;left:35%;display:none;} .pop_cover{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; top: 0; left: 0;} .wid30 { width:35px; height:35px; vertical-align:middle; margin-right:8px;z-index:999;} </style> <script> _this.isEnd = true; var page = _this.page_num; // ajax 自动获取数据 var token = $('#token').val();// 获取token值 var url = '/video/order-data'; //开始加载ajax请求时,提示 "加载中..." $("#video_list").ajaxStart(function(){ $("#loading").html("加载中..."); }); //发送ajax请求 $.post(url, { 'orderName' : orName, 'orderId' : orId, 'page' : page, '_token' : token }, function(data) { if (data.success) { $("#video_list").append(data.listHtml); if (data.hasmore == 1) { _this.isEnd = false; //每次加载完后,提示 "加载更多" $("#video_list").ajaxStop(function(){ $("#loading").html("加载更多"); }); } else { _this.isEnd = true; //已经加载完所有数据,提示 "无更多加载" $("#video_list").ajaxStop(function(){ $("#loading").html("无更多加载"); }); } } else { alert(data.msg); } }, 'json'); </script> <div class="video_list" id="video_big"> <div class="video_list" id="video_list"> @if($oVideos) @foreach($oVideos as $k=>$v) <div class="one_list" id="one_list"> <a href="/video/video-info/{{$v->id}}"> <div class="list_img"> @if(trim($v->img_thumb)) <img src="{{$v->img_thumb}}" /> @else <img src="/upload/video_thumb/default.jpg" /> @endif <span></span> <input type="button" class="btn" /> </div> <div class="list_info"> <h4>{{$v->title}}</h4> <p>案例分享:@if($v->author) {{$v->author->name}} @else 暂无 @endif</p> <p>评论专家:@if($v->expert) {{$v->expert->name}} @else 暂无 @endif</p> <p>评论数目:@if($v->comments_count) {{$v->comments_count}} @else 0 @endif</p> <p>点赞数目:@if($v->like_count) {{$v->like_count}} @else 0 @endif</p> </div> </a> </div> @endforeach @endif </div> <div class="loading_box" id="loading_box"> <div class="pop_cover"></div> <img class="wid30" src="load.gif" />正在上传... </div>

    知识简介:

    1、​ajaxStart() 在ajax请求开始时执行函数,所有的ajax提交都会触发ajaxStart事件

    $("#loading").ajaxStart(function(){ $(this).show(); });

    2、ajaxStop() 在ajax请求结束时执行函数

    $("#loading").ajaxStop(function(){ $(this).hide(); });

    图片:

    转载请注明原文地址: https://ju.6miu.com/read-1124469.html

    最新回复(0)