ホームページ > 記事 > ウェブフロントエンド > Ajax リクエストサーバーがデータリストをロードするのを待つユーザーエクスペリエンスを最適化します。
今回は、データリストをロードして待機するAjaxリクエストサーバーを最適化するための注意事項について説明します。以下は実際的なケースですので、見てみましょう。
weui.js の weui.loading をエフェクトとして使用し、データの読み込み時に数秒かかる読み込みを行うために ajax の beforeSend メソッドと complete メソッドを使用します...
必要な JSページにロードされるファイル:
これはweuiのドキュメントからダウンロードできます。そのデモ: https://weui.io/weui.js/
ここでは主にjQuery ajax get、querydataの構造について説明します:
$.ajax({ type: 'get', url: url, data: data, dataType: 'json', contentType: 'apllication/json; charset=utf-8' , //数据加载前调用的方法 beforeSend() beforeSend: function(data){ //这里判断,如果没有加载数据,会显示loading if(data.readyState == 0){ weui.loading('loading'); } }, //数据加载成功调用的方法 sucess() sucess: function(data){ //这里写数据加载成功后,会执行的代码 }, //数据加载成功后调用的方法 complete() complete: function(data){ //这里判断,数据加载成功之后,loading 隐藏 if(data.status == 200){ setTimeOut(function(){ weui.loading('loading').hide(); },500); } }, //数据加载错误后调用的方法 error() error: function(data){ weui.topTips('数据加载失败!'); } })
このメソッドはマスターできたと思います。この記事の事例などを読んだ後は、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
Ajaxを使用してセッションタイムアウトを実装し、ログインページにジャンプします
以上がAjax リクエストサーバーがデータリストをロードするのを待つユーザーエクスペリエンスを最適化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。