web-dev-qa-db-ja.com

AJAX=を使用してフォームを送信する場合と通常のページ送信を使用する場合

広く普及する前にAJAX使用およびDHTMLが送信され、ブラウザはその応答をロードすることによって更新されますPOST以前の(フォーム)を置き換えるHTTPリクエスト)ビューポートのページです。AJAXが一般的に使用されているため、2つの方法で対処できます。

私は、それぞれの特定のアプローチを使用する方が良いときのいくつかの一般的なガイドラインを考え出そうとしています。これが私が思いついたものです。私の大まかな試みよりも優れた既存のユースケースのセットがあるかどうか、または検討していない他の一般的なユースケースがあるかどうかを確認したいと思います。

AJAX submission when:

  • フォームは「自分自身」に送信します(送信後も同じフォームが表示されます)
  • フォームは大きなビューの一部にすぎません(テーブルやサムネイルグリッドなど、ページ上の領域に検索結果を動的に追加できる検索フォームなど)

次の場合は、通常のフォーム送信を使用してください。

  • 送信後、ユーザーを別のページに移動させるつもりです編集:この点は、単一ページのアプリケーションアーキテクチャを使用している場合は意味がありません。
  • 送信されたフォームデータは、AJAXを介して送信しようとするのではなく、ページを「再実行」する必要のある重要な方法で、データベースまたはアプリケーションの状態のデータを変更してから、既存のページに変更を反映させるためのクライアントの作業量(多くの場合、変更は、新しいデータ/状態を反映するためのクライアント側のビュー操作が適切になるほど単純であると思いますが)edit =:リアクティブビューライブラリ/フレームワーク(Reactなど)を使用している場合、この点は重要ではありません。

また、これらの推測が最適ではないUXを生成する理由があるかどうかも確認してください。

19
jinglesthula

UXの観点から、AJAXは100%の確率で改善されると思います[〜#〜] if [〜#〜]提供できます[〜#〜] all [〜#〜]フォームが処理中であり、壊れているように見えるだけではなく、適切な視覚的手掛かり。

考慮すべき点は次のとおりです。

  • <button>Submit <img src="spinner.gif"></button>内にビジュアルスピナーを提供し、処理が完了したらそれを削除してください

  • 送信時にプログラムでボタンを無効にし、視覚的およびプログラム的にフォームの二重送信を防止します

  • 明確なエラーvs成功vsさらにアクションが必要なメッセージを含む、簡単に識別できるメッセージボックスを提供する

  • 予期しない結果を引き起こす可能性のあるネットワークおよびサーバーのエラーを考慮に入れ、それらを確実にキャッチしてください

  • 成功時に別のページを表示する必要がある場合、JSは確かにそれを処理できます


プログラミングの観点から見ると、フィールドのPOST値を持ち歩くことを心配する必要がないので、特にそのフィールドはユーザーとの対話によって動的に生成された可能性があるため、作業が楽になります。

非常に大きなPOSTを実行している場合、ページが変更される前にブラウザがサーバーにこれらのすべてのバイトを送信できるようになるまでユーザーは待機する必要があり、ユーザーはもう我慢できないと思います私のものより。

14
MonkeyZeus

全体として、想定のリストは正しい方向に向かっていますが、理にかなっている場合は両方を使用する可能性から除外しません。他にいくつかのアイデアがあります:

  • AJAXを使用して、ユーザーが移動するときにフォームを検証して、エラー(または成功)をより迅速に確認できるようにします。
  • AJAXを入力フィールドに使用することを検討してください。これは、他のエリアに関するデフォルト/仮定をよりスマートにするのに役立つ可能性があります。たとえば、最初に郵便番号を要求して、市と州/省または電話の市外局番。
  • AJAXを使用して、ユーザーがこれまでに書き込んだコンテンツを一時的(または実際に)保存します。問題が発生します。ブラウザがフリーズします。コンピュータがロックします。インターネット接続が切断されます。ドラフトを追跡すると、ユーザーは何かが彼らがやろうとしていたことを妨害するとき、空気が抜けます。それでも、「下書きを保存」ボタンを提供することができます。ボタンをクリックすると、AJAX呼び出しを再送信するだけです。
  • ページの更新または別のページへのリダイレクトが必要なコンテンツを作成する場合は、一般的な送信方法を使用します。
6
Hynes