Ajax가 데이터를 반환하기 전 로딩 대기 효과(그래픽 튜토리얼)

Ajax 요청을 통해 백엔드에 매개변수를 전달한 후 백엔드는 일련의 작업을 수행한 후 데이터를 프런트엔드로 반환한 후 데이터가 성공적으로 반환될 때까지 기다리기 바랍니다. 다음으로 이 글을 통해 Ajax가 데이터를 반환하기 전 로딩 대기 효과에 대해 공유하겠습니다. 필요하신 분들은 참고하시면 됩니다

먼저 ajax 요청을 통해 백그라운드에 매개변수를 전달한 다음 백그라운드에서 데이터를 반환합니다. 일련의 작업 후 프런트엔드에 데이터가 성공적으로 반환될 때까지 기다리기 전에 loading.gif를 표시하고 싶습니다

말도 안 돼요, 페이지에서 클릭 이벤트를 실행하세요(<a sceneid="@scene .ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">생성</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  src="/static/imghwm/default1.png"  data-src="/images/load.gif"  class="lazy"  id="load"  / alt="Ajax가 데이터를 반환하기 전 로딩 대기 효과(그래픽 튜토리얼)" >&#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="/static/imghwm/default1.png"  data-src="/image/&#39; + localkey + &#39;"  class="lazy"   / alt="Ajax가 데이터를 반환하기 전 로딩 대기 효과(그래픽 튜토리얼)" >&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }

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

beforeSend: function () { jqSender.hide().after(&#39;<img  src="/static/imghwm/default1.png"  data-src="/images/load.gif"  class="lazy"  id="load"  / alt="Ajax가 데이터를 반환하기 전 로딩 대기 효과(그래픽 튜토리얼)" >&#39;); },

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

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

다음 메소드를 호출하세요.

rrreee

배경 페이지는 더 이상 쓰지 않겠습니다. 배경으로 전달되는 경로는 URL에 구성되어 있습니다. 가장 중요한 것은

rrreee입니다.

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

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

이런 식으로 이전에 삽입된 그림은 로딩과 같습니다. 데이터가 성공적으로 반환되면 이전 그림을 제거하고 완전한: function() 문에 작성합니다. 내 백그라운드 처리 흐름은 대략 다음과 같습니다. 먼저 http GET 요청을 만들어 WeChat 공개 플랫폼의 access_token을 얻은 다음 http POST 요청을 사용하여 WeChat QR 코드와 교환하여 티켓을 얻습니다
그런 다음 다음을 사용합니다. WebClient 방식으로 요청을 수행합니다. 획득한 QR 코드를 로컬 저장소에 다운로드한 후 데이터베이스를 추가, 삭제, 확인, 수정하여 웹 페이지에 QR 코드를 표시합니다.

이런 긴 시간은 로딩이 표시되는 데 충분한 시간을 허용합니다. 시간이 상대적으로 짧은 경우 온라인에서 로딩이 완전히 표시되지 않도록 시간이 정의되어 있는지 확인할 수 있습니다. 너무 갑작스럽습니다. 위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사: 데이터 상호 작용을 위해

jQuery

Ajax+PHP에서 ajax.load() 메서드를 사용하는 방법(코드 포함)

🎜🎜🎜🎜Ajax+Struts2 수신 배열 형식(포함) 코드) )🎜🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 Ajax가 데이터를 반환하기 전 로딩 대기 효과(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!