집 >백엔드 개발 >PHP 튜토리얼 >Ajax가 데이터를 반환하기 전 로딩 대기 효과 구현 방법에 대해

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

小云云원래의: 2017-12-25 10:42:232789검색

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

말도 안 돼요. 페이지에서 클릭 이벤트를 실행하세요(b5cb8c9ec1f76a5df98b1615e815a043Generate5db79b134e9f6b82c0b36e0489ee08ed) （86ccaefec7710717dc44addbe1314ffd生成5db79b134e9f6b82c0b36e0489ee08ed）

调用下面方法：

function build(sender) {
  var jqSender = $(sender);
  var sceneid = jqSender.attr(&#39;sceneid&#39;);
  $.ajax({
   type: &#39;post&#39;,
   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

입니다. 이는 비동기 ajax 요청의 특성을 고려해야 하며 해당 URL에 대해 ajax가 실행되면 스레드가 실행을 위해 백그라운드로 이동합니다.

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

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

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

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

관련 기사