Ajax는 사용자 경험을 향상시키기 위해 로딩 대기 효과를 구현합니다.

이번에는 Ajax의 로딩 대기 효과를 구현하고 사용자 경험을 향상시키기 위한 몇 가지 노트를 가져오겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

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

말도 안되는 소리는 없습니다. 페이지에서 event(<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)" >Generate)

다음 메소드를 호출합니다.

rrreee 배경 페이지에 전달되는 경로는 URL에 구성되어 있습니다. 가장 중요한 것은 rrreee

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

브라우저가 스레드를 추가합니다. 이것이 표준인지는 알 수 없음) 다음 프로그램을 계속 실행합니다. success: function (data) 일시 중지하고 배경이 데이터를 성공적으로 반환할 때까지 기다립니다

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

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

POST request

를 사용하여 WeChat QR 코드

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:

Ajax

🎜Ajax()를 사용하여 배경과 상호작용하는 단계에 대한 자세한 설명

위 내용은 Ajax는 사용자 경험을 향상시키기 위해 로딩 대기 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!