Ajax가 데이터를 반환하기 전에 로딩 대기 애니메이션 효과를 만드는 방법

이번에는 Ajax가 데이터를 반환하기 전에 로딩 대기 애니메이션 효과를 만드는 방법을 보여드리겠습니다. Ajax가 데이터를 반환하기 전에 로딩 대기 애니메이션 효과를 만들기 위한 주의 사항은 무엇입니까?

먼저 ajax 요청을 통해 백엔드에 매개변수를 전달한 다음, 백엔드는 일련의 작업을 수행한 후 데이터를 프런트엔드로 반환한 후 데이터가 성공적으로 반환될 때까지 기다리기 바랍니다

말도 안되는 소리는 아닙니다. 페이지에서 클릭 이벤트 실행(<a sceneid="@scene.ID" href="<a href="http://www.php.cn/wiki/48.html" target= "_blank">javascript<code>（<a sceneid="@scene.ID" href="<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>:void(0)" rel="external nofollow" <a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a>="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('<img id="load" src="/images/load.gif" />');
   },
   success: function (data) {
    //根据id和class获取td标签
    $('tbody tr[id=' + sceneid + '] td.wxurl-col').html(data.QRUrl);
    $('tbody tr[id=' + sceneid + '] td.localkey-col').html(data.LocalKey);
    //隐藏生成按钮，插入图片
    var localkey = data.LocalKey;
    jqSender.after('<img src="/image/&#39; + localkey + &#39;" />');
   },
   complete: function () {
    $('#load').remove();
   }
  });
 }

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

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

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

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

="build (this)"> 생성)

다음 메소드 호출:

rrreee 배경 페이지는 작성하지 않겠습니다. 배경으로 전달되는 경로는 URL에 구성되어 있습니다. 중요한 것은 rrreee

이것은 ajax 비동기를 고려해야 합니다. 요청의 특성상 ajax가 url에 실행되면 스레드가 실행을 위해 백그라운드로 점프합니다.

브라우저에서 스레드를 추가합니다. 이것이 표준인지 확인) 후속 프로그램을 계속 실행하려면 성공: 함수(데이터) 일시 중지하고 배경이 데이터를 성공적으로 반환할 때까지 기다립니다

이런 식으로 이전에 삽입한 그림은 동일합니다. 데이터가 성공적으로 반환되면 이전 그림을 제거하고 완전한: 함수() 문에 작성합니다.

내 백그라운드 처리 흐름은 대략 다음과 같습니다. 먼저 http GET 요청을 만들어 WeChat 공개 플랫폼의 access_token을 얻은 다음 http POST request

를 사용하여 WeChat QR 코드

와 교환하여 티켓을 얻습니다. 그런 다음 WebClient 메소드를 사용하여 요청한 QR 코드를 로컬 저장소에 다운로드한 다음 데이터베이스를 추가, 삭제, 확인 및 수정하여 웹 페이지에 QR 코드를 표시합니다.

이렇게 긴 시간은 로딩이 표시되는 데 충분한 시간을 허용합니다. 시간이 비교적 짧은 경우 온라인에서 로딩이 완전히 표시되지 않도록 시간이 정의되어 있는지 확인할 수 있습니다. 너무 갑작스럽습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:

🎜CORS를 사용하여 WebApi Ajax 도메인 간 요청을 구현하는 방법🎜🎜🎜🎜🎜Ajax가 콤보 상자의 동적 로딩을 구현하는 방법(코드 포함)🎜🎜🎜

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