web-dev-qa-db-ja.com

AJAX vsフォーム送信

サーバーからデータをプルします。そのためにStrutsを使用している場合は、MVC Architectureのページを送信するか、AJAX呼び出しを実行することでプルできますが、規則はフォームとレンダリング応答を使用することですが、リッチなユーザーエクスペリエンスを提供するという課題にも直面しているため、慣例を妥協し、過剰なAJAXを使用し始めます。それでは、2つのバランスをどのように取る必要がありますか？

javaajaxstrutsform-submit
15
Vardan Gupta

個人的には、AJAXを表示の更新に使用し、フォームの送信はページのリロードを介して行う必要があると思います。理由は？

フォームを送信するときは、アプリケーションに何かをするように指示しています。ユーザーは、それが行われたと感じたいと思う傾向があります。ページがリロードされない場合、ユーザーは「それは機能しましたか？」と疑問に思うことがよくあります。次に、彼らは自分たちがしたことが正しいことを確認するためにチェックする必要があります。

一方、グラフなどを表示しているときに、たとえば「2011年のデータを表示...今は2012年のデータを表示する」とユーザーが言った場合、ユーザーは何かを「実行」していません（新しいエンティティの作成、メールの送信、等）。したがって、AJAXは、この場合、優れたユーザーインターフェイスを提供できます。ページの再読み込みはここでは煩わしいでしょう。

結論として、フォームの送信はページのリロードを介して行う必要があると思います（ユーザーにそれが機能していることを確認させます）が、表示の更新はAJAX（迷惑なページのリロードを防ぐ）を使用する必要があります。

もちろん、これは好みです。私の会社のアプリケーションのいくつかはAJAX全体で使用しています。しかし、それらは保守とデバッグが最も難しいアプリケーションです。;）

26
Snowy Coder Girl

通常の古いHTMLフォームの送信と派手なajaxフォームは相互に排他的ではありません。

まず、プレーンHTMLフォームが正しく機能するようにします。次に、JavaScriptを追加してフォームをハイジャックし、ajaxリクエストを送信します。

コントローラとモデルは、ユーザーのブラウザがjavascriptをサポートしているか（または有効にしているか）を気にしません。レンダリングされるビューは、呼び出しがjavascriptで行われたか、単純なフォーム送信で行われたかによって決まります。これはMVCパターンの長所の1つであり、制約ではありません。

8
bdares

私は、2つの間の選択はやや本質的だと思います。

  • フォームの送信は同期的であり、ページを再読み込みします。

  • ajax呼び出しは非同期であり、ページをリロードしません。

特定のアクションによって多くのUI要素が変更される場合、またはレンダリングするために多くのデータをポーリングする必要がある場合は、フォームの送信を行います。一方、選択ボックスへの入力やユーザーエクスペリエンスの向上など、特定のアクションが単純なアクションに使用される場合は、AJAX呼び出しを行います。

必要な数のajax呼び出しまたはフォーム送信を使用することを避けることはできないので、最終的にはあなた次第です。

5
Th0rndike

データの送信の間にエラーがある場合は、サーバーで確認できる唯一のフォームメソッドです。一方、Ajax呼び出しを行う場合は、クライアント側でそのエラーを確認できます。したがって、データを送信するこのさまざまなテクノロジーから、さまざまな目的に役立つという決定に従うことができます。

2
Roman C

この時代では、デフォルトのHTMLフォーム送信方法（純粋な郷愁、またはおそらく無知を除いて）を使用するケースは事実上ありません。

何が起こっても、AJAXを使用して、より凝縮されたコードベースでプロセス全体をより細かく制御できます。しかし、もっと重要なことは、私たちはもうそのようなことをしないだけです。

考えてみましょう：

HTMLフォームが送信されると（古いスタイル）:( a）フォームフィールドを収集しますname=属性値（これらは事実上の変数名になります）（b）フォームフィールドにユーザーが入力したデータ（変数値になります） ）、これらのデータペアをPHPファイルに投稿します。

まったく同じプロセス javascript/jQueryを使用して簡単にプログラムできます 。

ただし、古いスタイルのHTMLフォーム送信では、ページが変更されます-したがって、フィールド検証を実行する場合は、javascript/jQueryを使用して送信プロセスに割り込むため、次のようになります：

$('myform#btnSubmit').click(function(){
    var some_fields_failed = false;
    //check form field values here, set: some_fields_failed = true
    if (some_fields_failed){
       return false; //halts the HTML Form Submit process and returns control to the user
    }
});

この場合、HTMLフォーム送信プロセスを置き換えるAJAX構造のほとんどをすでに使用しています。

この簡単な紹介 からAJAXは、古いスタイルのHTMLフォーム送信プロセスの代わりにAJAXを使用するいくつかの説得力のある理由を提供します：

AJAXは、次のことができるため、開発者の夢です。

ページをリロードせずにWebページを更新する
サーバーからのデータのリクエスト-ページが読み込まれた後
サーバーからデータを受信する-ページが読み込まれた後
データをサーバーに送信する-バックグラウンドで

純粋なjavascriptでajaxコードを記述できますが、jQuery（javascript）ライブラリを使用する方がはるかに簡単です（入力がはるかに少なく、一貫性があります）。したがって、上記のすべての例ではjQueryを使用しています。 プロジェクトにjQueryを含めるには、jQueryライブラリへの参照を含めるだけで済みます：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

StackOverflow maven、 Schabse Laks 、作成した 単純なjQueryチュートリアル ステップスルーする価値があります（重要：下矢印を使用してページをステップスルーします）

0
cssyphus