jquery ajaxポップアップエラー-フロントエンドQ&A-php.cn

jquery ajaxポップアップエラー

PHPz

リリース： 2023-05-18 22:22:38

オリジナル

943 人が閲覧しました

jQuery Ajax は、開発者が Web ページで Ajax テクノロジーを簡単に使用できるようにするブラウザー側の JS プラグインです。 jQuery Ajax を使用すると、サーバーが応答できない、リクエストがタイムアウトになった、返されたデータ形式が正しくないなどのエラーが発生することがよくあります。このようなエラーが発生した場合、ユーザーがタイムリーにフィードバックを得ることができるように、エラープロンプトをポップアップ表示できるようにしたいと考えるのが通常です。 jQuery Ajax を使用してエラーをポップアップ表示する方法を次に示します。

ステップ 1: Ajax リクエストのパラメーターを設定する

jQuery Ajax を使用する場合、config と同様のパラメーターオブジェクトを設定できます。このパラメータオブジェクトには、error と呼ばれる非常に重要な属性があります。 error 属性を設定した後、Ajax リクエストが失敗した場合、またはバックエンドサーバーでエラーが発生した場合、error 関数が呼び出されます。

たとえば、以下に示すように、Ajax リクエストのパラメーターオブジェクトでエラー関数を定義できます。

$.ajax({
  url: "http://example.com",
  type: "get",
  dataType: "json",
  success: function(data) {
    // 请求成功，处理返回的数据
  },
  error: function(error) {
    // 请求出错，处理错误信息
  }
})

ログイン後にコピー

ここでのエラー関数は、Ajax リクエストが失敗したとき、またはバックグラウンドで呼び出されたときに呼び出されます。サーバーが失敗します。エラー関数が呼び出されると、関数のパラメータとしてエラーパラメータが渡されます。 error パラメータは、リクエストの失敗理由、ステータスコード、応答内容、その他の情報を含むオブジェクトです。

ステップ 2: エラーメッセージに基づいて、対応するエラープロンプトボックスをポップアップ表示します。

error 関数では、error パラメーターの内容に基づいてエラーの種類を判断し、対応するエラープロンプトボックス。たとえば、jQuery UI の Dialog コンポーネントを使用してエラープロンプトボックスを実装できます。コードは次のとおりです:

error: function(error) {
  var errorType = "";
  if(error.status == 404) {
    errorType = "未找到请求的页面";
  } else if(error.status == 500) {
    errorType = "服务器出错，请联系管理员";
  } else {
    errorType = "请求出错，请重试";
  }

  // 弹出错误提示框
  $("<div>发生了如下错误：" + errorType + "</div>").dialog({
    modal: true,
    title: "错误提示",
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      }
    }
  });
}

ログイン後にコピー

この例では、エラーの status 属性に基づいてエラーの種類を決定します。 404 の場合は、要求されたページが見つかりませんでした。500 の場合は、サーバーエラーを意味します。それ以外の場合は、要求エラーが発生しました。次に、jQuery UI のダイアログコンポーネントを使用して、タイトルが「エラープロンプト」、内容がエラーの種類、確認ボタンが「OK」のエラープロンプトボックスをポップアップします。

ステップ 3: スタイルを美しくする

エラープロンプトボックスをより美しくするために、スタイルを美しくすることができます。たとえば、背景色、フォントサイズ、境界線の幅などの CSS プロパティを追加して、エラープロンプトボックスを美しくすることができます。コードは次のとおりです。

.ui-dialog-titlebar-close {
  visibility: hidden;
}

.ui-dialog {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
}

.ui-dialog-titlebar {
  background-color: #eee;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.ui-dialog-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.ui-dialog-content {
  padding: 10px;
  font-size: 16px;
}

ログイン後にコピー

上記の CSS コードでは、閉じるボタンの表示/非表示、ダイアログの背景色、境界線の幅など、ダイアログコンポーネントのさまざまな要素のスタイルを設定しています。。このようにして、エラーメッセージボックスを美しくし、より快適で親しみやすいものにすることができます。

概要

jQuery Ajax を使用する場合、リクエストの失敗に気づき、対応するエラープロンプトボックスを適切なタイミングでポップアップ表示して、リクエストのステータスをユーザーに知らせる必要があります。 Ajax パラメータにエラー関数を設定すると、リクエストが失敗したときに対応するエラー情報を取得し、さまざまなエラータイプに対応するエラープロンプトボックスをポップアップ表示できます。エラープロンプトボックスをより美しく、親しみやすいものにするために、それを美しくすることができます。

以上がjquery ajaxポップアップエラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。