Ajax가 데이터를 반환하기 전 로딩 대기 효과 구현 방법에 대해

우리 모두는 일부 페이지를 로드할 때 이를 알고 있습니다. 대기 중인 로딩 페이지가 나타납니다. ajax 요청을 통해 백엔드에 매개변수를 전달한 다음, 백엔드는 일련의 작업을 수행한 후 데이터가 반환될 때까지 기다리기 전에 loading.gif를 표시하고 싶습니다. 성공적으로. 다음으로, 이 글을 통해 Ajax가 데이터를 반환하기 전 로딩 대기 효과를 공유하겠습니다. 필요한 친구들이 참고할 수 있습니다.

말도 안 돼요. 페이지에서 클릭 이벤트를 실행하세요(<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this) " >Generate</a>) （<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>）

调用下面方法：

function build(sender) {
  var jqSender = $(sender);
  var sceneid = jqSender.attr('sceneid');
  $.ajax({
   type: 'post',
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after(&#39;<img id="load" src="/images/load.gif" />&#39;);
   },
   success: function (data) {
    //根据id和class获取td标签
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.wxurl-col&#39;).html(data.QRUrl);
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.localkey-col&#39;).html(data.LocalKey);
    //隐藏生成按钮，插入图片
    var localkey = data.LocalKey;
    jqSender.after(&#39;<img src="/image/&#39; + localkey + &#39;" />&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }

后台页面就不写了，url中配置了传递到后台的路径，最主要的就是

beforeSend: function () { jqSender.hide().after(&#39;<img id="load" src="/images/load.gif" />&#39;); },

这要考虑到ajax异步请求的特点，当ajax执行到url的时候，会有一个线程跳转到后台去执行，

浏览器会增加一个线程（不知道这么说标不标准）继续执行后面的程序，到success: function (data)

rrreee

rrreee

브라우저는 스레드를 추가하고(표준인지 아닌지는 모르겠습니다) 계속해서 다음 프로그램을 실행합니다. success: function (data)로 이동하여 일시 중지하고 기다립니다. 데이터를 성공적으로 반환하려면 배경이

이렇게 하면 이전에 삽입된 그림이 꽤 됩니다. 따라서 로딩을 위해 데이터가 성공적으로 반환되면 이전의 이미지가 제거되고 완전한: function() 문에 작성됩니다. 내 백그라운드 처리 흐름은 대략 다음과 같습니다. 먼저 http GET 요청을 만들어 WeChat 공개 플랫폼의 access_token을 얻은 다음 http POST 요청을 사용하여 WeChat QR 코드와 교환하여 티켓을 얻습니다

그런 다음 다음을 사용합니다. WebClient 방식으로 요청을 수행합니다. 획득한 QR 코드를 로컬 저장소에 다운로드한 후 데이터베이스를 추가, 삭제, 확인, 수정하여 웹 페이지에 QR 코드를 표시합니다. 이렇게 긴 시간은 로딩이 표시되는 데 충분한 시간을 허용합니다. 시간이 비교적 짧은 경우 온라인에서 로딩이 완전히 표시되지 않도록 시간이 정의되어 있는지 확인할 수 있습니다. 너무 갑작스럽습니다.

관련 권장 사항:

위 내용은 Ajax가 데이터를 반환하기 전 로딩 대기 효과 구현 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!