Ajax の beforeSend を上手に使用してユーザー エクスペリエンスを向上させる方法に関する簡単な分析

ここで、Ajax の beforeSend を上手に使用してユーザー エクスペリエンスを向上させる方法について簡単に分析します。ぜひ共有して参考にしてください

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);
}
});

上記皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

IEでのAjax送信コードが文字化けする簡単な解決方法

データを取得してページに表示するAjax実装方法

Ajaxフォーム非同期アップロードファイルのサンプルコード

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