ホームページ > ウェブフロントエンド > jsチュートリアル > Ajax の beforeSend を上手に使用してユーザー エクスペリエンスを向上させる方法に関する簡単な分析

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

亚连
リリース: 2018-05-24 10:31:08
オリジナル
1383 人が閲覧しました

ここで、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート