beforeSend でユーザー エクスペリエンスを向上させる方法

今回は、beforeSend がどのようにユーザー エクスペリエンスを向上させるかを説明します。次に、beforeSend がユーザー エクスペリエンスを向上させるために使用できる notes について説明します。

jQueryは、頻繁に使用されるオープンソースのjsフレームワークです。$.ajaxリクエストには、リクエストをサーバーに送信する前にいくつかのアクションを実行するために使用されるbeforeSendメソッドがあります。

$.ajax({
   beforeSend:function(){
   // handle the beforeSend event   
   },
   complete:function(){
// handle the complete event  
   }
});

データの重複を防ぐ

実際のプロジェクト開発では、ネットワークやその他の理由でフォームを送信する際に、ユーザーが送信ボタンをクリックし、操作が成功しなかったと誤って認識し、その後に番号が表示されることがあります。ページのフロントエンド コードが対応する処理を実行しない場合、通常、複数の同じデータがデータ ライブラリに挿入され、ダーティ データが増加します。この現象を回避するには、$.ajax リクエストの beforeSend メソッドで送信ボタンを無効にし、Ajax リクエストが完了するまで待ってから、ボタンの使用可能な 状態 を復元します。 例:

$.ajax({
type:"post",
data:studentInfo,
contentType:"application/json",
url:"/Home/Submit",
beforeSend:function(){
   //禁用按钮防止重复提交
   $("#submit).attr({disabled:"disabled"});
},
success:function(data){
   if(data=="Success"){
     // 清空输入框
     clearBox();
   }
},
complete:function(){
   $("#submit").removeAttr("disabled");
},
error:function(data){
   consloe.info("error:"+data.responseText);
}
});

トースト効果をシミュレート

サーバーにデータリストのロードをリクエストするときに、Ajaxプロンプトがロード中(「ロード中、お待ちください...」)を表示します

$.ajax({
type:"post",
contentType:"application/json",
url:"/Home/GetList",
beforeSend: function(){
   $("loading").show();
},
success: function(data){
   if (data=="Success"){
     // ...
   }
},
error: function(){
   console.info("error:"+data.responseText);
}
});

この記事の場合 方法、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨書籍:

jQuery+AJAX 呼び出しページの背景

Ajax に関するディスカッションと研究

以上がbeforeSend でユーザー エクスペリエンスを向上させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。