0

JQueryと を含むこのダイアログが<input>あり<table>ます。のオンロードコンテンツの<input>フィルタ フィールドです。この機能があると聞いたことがありますが、このモジュールは今のところオプションではありません。<table>JQGrid

他のソリューションについて検索してみましたが、AJAX. 私はSpring-Rooこのスレッドに使用しているため、このAJAXことは初めての解決策になる可能性がありますAJAX。ビューのコードの構造は次のとおりですjavascript。

<form:form action="POST" action="form_action" modelAttribute="form">
    <div>
        <form:input path="filterField" />
        <input type="submit" value="Search" />          
    </div>
    <div>
        <table>
            <c:forEach items="${items}" var="itr">
                <tr>
                    <td>${itr.data}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
</form:form>

JQuery、AJAX、およびは初めてですSpring-Roo。これに関する詳細な説明を行うことができます。

4

1 に答える 1

1

これは非常に一般的な要求であるため、非常に一般的な回答を提供しようとします。

非同期呼び出しを行うにはいくつかのことが必要であり、いくつかの決定を下す必要があります。AJAX はもはや AJAX を意味するものではなく、ブラウザーベースのクライアントからある種のバックエンドへの非同期呼び出しを行うすべてのプロセスに適用される一般的な用語であることを理解してください。

まず、AJAX リクエストを処理するメソッドを作成する必要があります。これは、最初に行う必要がある決定です。サービスへの要求パラメーターは何か、結果のペイロードは何か。私は RESTful な JSON 型のリクエストを好みますが、多くの人は XML を好みます。RESTful JSON バージョンの場合、次のようなことができます。

@RequestMapping("/widgets/{id}")
public @ResponseBody Widget getMyWidget(@PathVariable Integer id) {
  // ...perform some lookup, idealy in a service layer
  Widget myWidget = myService.findWidget(id);
  return myWidget;
}

ここで重要な部分は@ResponseBodyとreturn myWidgetです。Spring では@ResponseBody、戻り値が文字通り応答本文にコピーされることを示します。したがって、たとえば、HTML コードを含む文字列を返すことができます。これは単にコピーして応答に貼り付けるだけです。これは通常の return とは逆で、通常は a を表す文字列名ですView。PFM (pure friggen magic) の 2 番目のビットは、タイプ Wiget のリターンです。パスに Jackson ライブラリがある限り、Spring はそれを自動的に魔法のように使用して、戻り値を JSON にシリアル化します。これにより、サーバー側が処理されます。

クライアント側では、サーバーでサービスを呼び出す必要があります。まず、 を捨てて<input type="submit" value="Search" />、代わりにタイプ ボタンにします。送信タイプを使用すると、非同期ではないフォームを送信しようとするため、問題が発生するだけです。jQuery クリック ハンドラーをボタンにアタッチし、その$.ajax()メソッドを使用してサービスを呼び出します。繰り返しますが、多くのオプションがあり、すべてを検討する方法はありません。しかし、ここでの一般的な考え方は、次のようなことをすることです:

$('#myButton').click(function() {
  $.ajax({
    url: 'http://myhost/myController/widget/1',
    success: function(data) {
      // Do something with the widget, like fill a table full of stuff
    }
  });
});

jQuery の $.ajax() 呼び出しには多くのオプションがあり、あちこちに例があります。おそらく、エラー応答も処理したいでしょう...この例では、成功の処理のみを示しています。

これで少なくとも始められるはずです。私はあなたのアプリケーションや関連する状況がわからないため、アーキテクチャに関する決定を下すことができないため、すべてのオプションと可能性を自分で調査する必要があります。

于 2013-08-13T11:33:32.033 に答える