web-dev-qa-db-ja.com

Spring Web MVCでAjax JQueryを使用する方法

アプリケーションにSpring Web MVCを使用しています。

JSPビューにドロップダウンリストが1つあります。これは、savegroup.htmと呼ばれる次のリクエストからのものです。

<bean name="/savegroup.htm" class="com.sufalam.mailserver.presentation.web.GroupSaveController">
    <property name="sessionForm" value="true"/>
    <property name="commandName" value="Group"/>
    <property name="commandClass" value="com.sufalam.mailserver.presentation.bean.GroupViewBean"/>
    <property name="formView" value="common"/>
    <property name="successView" value="managegroup.htm"/>
    <property name="userSecurityProcessor" ref="IUserSecurityProcessor"/>
    <property name="domainsSecurityProcessor" ref="IDomainsSecurityProcessor"/>
    <property name="forwardingsSecurityProcessor" ref="IForwardingsSecurityProcessor"/>
</bean>

JSPページには以下があります。

<form:form name="groupSaveForm" action="savegroup.htm" commandName="Group" method="POST">
    Group Name :
    <form:input path="source"/><br><br>
    Domain List :
    <form:select id="domains" onchange="javascript:getUser();" path="domainsList" multiple="false" size="1">
        <form:option value="-" label="--Select--"/>
        <form:options items="${domainsList}" itemValue="domain" itemLabel="domain"/>
    </form:select>
</form:form>

私の要件は、ドロップダウンリストの変更イベントで、関連するユーザーをサーバーからフェッチし、そのユーザーのリストをいくつかのリストボックスに表示することです。

そのためには、jQuery AJAX callをどのように使用できますか？

リクエストを受け取り、関連するユーザーをフェッチするサーバー側コードはどこで処理する必要がありますか？

JSPに次のユーザーセットを表示するにはどうすればよいですか？

javajqueryajaxjspspring-mvc
23
Nirmal

これを解決する方法はいくつかあります。しっかりとしたガイダンスを提供する前に、質問に対するいくつかの回答が必要です。

AjaxリクエストのXMLとJSONのどちらを優先しますか？

注意すべきことの1つ-私があなたに何をするつもりなのかについて、特定のjqueryはありません。 jqueryに役立つ形式（理想的にはXMLまたはjson）でjquery async要求への応答を返信する必要がありますが、サーバー側では、たまたまXMLをレンダリングするビューを使用する通常の要求のように見えますまたはhtmlの代わりにjson。私の個人的な好みは、JSONを使用することです。特に、spring-jsonパッケージは非常にうまく機能し、仕組みを理解すれば簡単に使用できるためです。 http://spring-json.sourceforge.net/ から入手できるspring-jsonパッケージをお勧めします。すべてのドキュメントを読んで、それがどのように機能するかを非常によく理解しているはずです。

最も基本的な形式では、ソリューションは次のことを行う必要があります。

Spring-jsonビューのnoeを使用するビューを構成します。ほとんどの場合、私はsojoViewを好みます。

サーバーに非同期リクエストを行い、ユーザーのリストを返します。ユーザーのセットを提供するために必要な唯一の情報がドロップダウンの選択された値である場合、クエリ文字列で選択されたドメインを使用してGETリクエストを発行することは非常に簡単です。サーバー側では、着信要求にマップされ、jqueryによって処理されるjsonまたはxmlを送り返すコントローラーが必要です。基本的に、GETまたはPOSTメソッドでアクセスするかどうかにかかわらず、完全に通常のコントローラーを作成し、jsonビューの名前を返す前に、ユーザーのリストをモデルに追加できます。3種類のjsonビューspring-jsonによって提供されるものは、リスト内のBeanをjson構造にレンダリングし、それをクライアントに送信します。すべての標準のDataBinder機能を使用して受信パラメーターを解析/変換でき、検証エラーはフィールドエラーまたはグローバルエラーを生成しますクライアント側のコードがユーザーに提示できるjson応答のメッセージ。

最も単純なケースでは、私のコードは次のようになります（これはすべてSpring 2.5です。これは注釈を使用しますが、アプリのコンテキストでxml構成を使用して同じことを実行できます）。

@Controller
public class AjaxController {

    @RequestMapping("/some/path/selectDomain.json", method=RequestMethod.GET)
    public ModelAndView processDomainSelection(@RequestParam(value="domain", required="true") String selectedDomain) {
        List<User> users = service.loadUsersForDomain(selectedDomain);
        ModelAndView mv = new ModelAndView("sojoView", "users", users);
        return mv;
    }
}

POSTリクエストを介して処理したい場合、および送信されたdomainValueから実際のDomainオブジェクトをロードしたい場合は、次のようにすることができます

@Controller
@RequestMapping("/some/path/selectDomain.json")
public class SelectDomainController {
    public class FormBean {
        protected Domain domain;
        public Domain getDomain() {
            return domain;
        }
        public void setDomain(Domain domain) {
            this.domain = domain;
        }
    }

    @ModelAttribute("command")
    public FormBean getCommand() {
        return new FormBean();
    }

    @InitBinder
    public void initBinder(WebDataBinder binder, WebRequest request) {
        // this custom editor knows how to load a Domain object from the domainValue string
        // if it fails to convert, it can throw an exception, which will result in 
        // an error being logged against the "domain" field
        binder.registerCustomEditor(Domain.class, "domain", new DomainLookupEditor(domainService));
    }

    @RequestMapping(method=RequestMethod.POST)
    public String selectedDomain(@ModelAttribute("command") FormBean command,
                                       BindingResult result,
                                       Model model,
                                       HttpServletRequest request) {
        if (result.hasErrors()) {
            return "sojoView";
        }
        Domain domain = command.getDomain();
        List<User> users = domain.getUsers();
        model.addAttribute("users", users);
        return "sojoView";
    }
}

Ajaxリクエストを発行するには、jquery ajaxFormモジュールを使用できます。 IDが「selectDomainForm」のフォームがあるとすると、次のようなjsが必要です。

function selectDomainSuccessHandler(json) {
    // it is possible to send back a 200 response after failing to process the request,
    // in which case, the sojoView will have set success=false in the json
    if (json.success == true) {
        // parse json here and render it into html in your document
    } else {
        // get field error and global error from json and present to user
    }
}

function(selectDomainErrorHandler(xhr, returnCode) {
    // do something based on the return code
}

var options = {
    success: selectDomainSuccessHandler,
    error: selectDomainErrorHandler,
    dataType: 'json'
};

$('selectDomainForm').ajaxForm(options);

取得する代わりに投稿する方法を学び、特定のフィールドのみを取得してフォームの意図したURLではないURLに送信するために、ajaxFormモジュールのドキュメントをグーグルアップできます。

ページにユーザーのリストを表示するには、コードに「userList」のようなIDのdivを作成し、返されたjsonのユーザーを反復処理して、ユーザーごとにhtmlを作成します。そのHTMLを "userList" divに追加するだけで、ブラウザに表示されます。

35
ideasculptor

のコントローラを定義します URL

POSTメソッドを使用する場合：

content.load('URL(.)or(#)sectionToLoad', {}, function(event) {
...
});

または、GETメソッドを使用する場合：

content.load('URL(.)or(#)sectionToLoad', function(event) {
...
});

.clickまたは.submitのような関数で呼び出します

以上です

0
Defrag