Spring 4 MVC Ajax Hello Worldの例

このチュートリアルでは、Spring MVC Webプロジェクトを作成し、Ajax経由でフォームを送信する方法を示します。

使用される技術：

Spring 4.2.2.RELEASE
ジャクソン2.6.3
ログバック1.1.3
jQuery 1.10.2
メーベン3
JDK 1.8
Tomcat 8またはJetty 9
Eclipse 4.5
ブーストラップ3

P.S If the Jackson library is found in the project classpath, Spring will use Jackson to handle the json data to / from object conversion automatically.

Note
これを試してください–Spring Boot Ajax example

1. クイックリファレンス

1.1 In HTML, use jQuery $.ajax() to send a form request.

    jQuery(document).ready(function($) {
        $("#search-form").submit(function(event) {

            // Prevent the form from submitting via the browser.
            event.preventDefault();
            searchViaAjax();

        });
    });

    function searchAjax() {
        var data = {}
        data["query"] = $("#query").val();

        $.ajax({
            type : "POST",
            contentType : "application/json",
            url : "${home}search/api/getSearchResult",
            data : JSON.stringify(data),
            dataType : 'json',
            timeout : 100000,
            success : function(data) {
                console.log("SUCCESS: ", data);
                display(data);
            },
            error : function(e) {
                console.log("ERROR: ", e);
                display(e);
            },
            done : function(e) {
                console.log("DONE");
            }
        });
    }

1.2 Spring controller to handle the Ajax request.

@Controller
public class AjaxController {

    @ResponseBody
    @RequestMapping(value = "/search/api/getSearchResult")
    public AjaxResponseBody getSearchResultViaAjax(@RequestBody SearchCriteria search) {

        AjaxResponseBody result = new AjaxResponseBody();
        //logic
        return result;

    }

}

2. プロジェクトディレクトリ

標準のMavenプロジェクトディレクトリ構造であるプロジェクトディレクトリを確認します。

3. プロジェクトの依存関係

pom.xml


    4.0.0
    com.example
    spring4-mvc-maven-ajax-example
    war
    1.0-SNAPSHOT
    spring4 mvc maven ajax example

    
        1.8
        4.2.2.RELEASE
        2.6.3
        1.1.3
        1.7.12
        1.2
        3.1.0
    

    

        
            org.springframework
            spring-webmvc
            ${spring.version}
            
                
                    commons-logging
                    commons-logging
                
            
        

        
        
            com.fasterxml.jackson.core
            jackson-core
            ${jackson.version}
        

        
            com.fasterxml.jackson.core
            jackson-databind
            ${jackson.version}
        

        
        
            javax.servlet
            jstl
            ${jstl.version}
        

        
        
            org.slf4j
            jcl-over-slf4j
            ${jcl.slf4j.version}
        

        
            ch.qos.logback
            logback-classic
            ${logback.version}
        

        
        
        
            javax.servlet
            javax.servlet-api
            ${servletapi.version}
            provided
        

    

    

        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                3.3
                
                    ${jdk.version}
                    ${jdk.version}
                
            

            
                org.eclipse.jetty
                jetty-maven-plugin
                9.2.11.v20150529
                
                    10
                    
                        /spring4ajax
                    
                
            

            
                org.apache.maven.plugins
                maven-eclipse-plugin
                2.10
                
                    true
                    true
                    2.0
                    spring4ajax
                
            

            
                org.apache.maven.plugins
                maven-war-plugin
                2.6
                
                    false
                
            

            
            
                org.wildfly.plugins
                wildfly-maven-plugin
                1.1.0.Alpha5
                
                    127.0.0.1
                    9990
                    admin
                    admin
                    spring4ajax.war

4. ばね部品

重要なクラスのみが表示されます。

4.1 @RestController to handle the Ajax request. 自明のコメントを読んでください。

AjaxController.java

package com.example.web.controller;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.annotation.JsonView;
import com.example.web.jsonview.Views;
import com.example.web.model.AjaxResponseBody;
import com.example.web.model.SearchCriteria;
import com.example.web.model.User;

@RestController
public class AjaxController {

    List users;

    // @ResponseBody, not necessary, since class is annotated with @RestController
    // @RequestBody - Convert the json data into object (SearchCriteria) mapped by field name.
    // @JsonView(Views.Public.class) - Optional, filters json data to display.
    @JsonView(Views.Public.class)
    @RequestMapping(value = "/search/api/getSearchResult")
    public AjaxResponseBody getSearchResultViaAjax(@RequestBody SearchCriteria search) {

        AjaxResponseBody result = new AjaxResponseBody();

        if (isValidSearchCriteria(search)) {
            List users = findByUserNameOrEmail(search.getUsername(), search.getEmail());

            if (users.size() > 0) {
                result.setCode("200");
                result.setMsg("");
                result.setResult(users);
            } else {
                result.setCode("204");
                result.setMsg("No user!");
            }

        } else {
            result.setCode("400");
            result.setMsg("Search criteria is empty!");
        }

        //AjaxResponseBody will be converted into json format and send back to the request.
        return result;

    }

    private boolean isValidSearchCriteria(SearchCriteria search) {

        boolean valid = true;

        if (search == null) {
            valid = false;
        }

        if ((StringUtils.isEmpty(search.getUsername())) && (StringUtils.isEmpty(search.getEmail()))) {
            valid = false;
        }

        return valid;
    }

    // Init some users for testing
    @PostConstruct
    private void iniDataForTesting() {
        users = new ArrayList();

        User user1 = new User("example", "pass123", "[email protected]", "012-1234567", "address 123");
        User user2 = new User("yflow", "pass456", "[email protected]", "016-7654321", "address 456");
        User user3 = new User("laplap", "pass789", "[email protected]", "012-111111", "address 789");
        users.add(user1);
        users.add(user2);
        users.add(user3);

    }

    // Simulate the search function
    private List findByUserNameOrEmail(String username, String email) {

        List result = new ArrayList();

        for (User user : users) {

            if ((!StringUtils.isEmpty(username)) && (!StringUtils.isEmpty(email))) {

                if (username.equals(user.getUsername()) && email.equals(user.getEmail())) {
                    result.add(user);
                    continue;
                } else {
                    continue;
                }

            }
            if (!StringUtils.isEmpty(username)) {
                if (username.equals(user.getUsername())) {
                    result.add(user);
                    continue;
                }
            }

            if (!StringUtils.isEmpty(email)) {
                if (email.equals(user.getEmail())) {
                    result.add(user);
                    continue;
                }
            }

        }

        return result;

    }
}

4.2 The “json data” will be converted into this object, via @RequestBody.

SearchCriteria.java

package com.example.web.model;

public class SearchCriteria {

    String username;
    String email;

    //getters and setters
}

4.2 Create a dummy class for @JsonView, to control what should be returned back to the request.

Views.java

package com.example.web.jsonview;

public class Views {
    public static class Public {}
}

4.3 User object for search function. @JsonViewで注釈が付けられたフィールドが表示されます。

User.java

package com.example.web.model;

import com.fasterxml.jackson.annotation.JsonView;
import com.example.web.jsonview.Views;

public class User {

    @JsonView(Views.Public.class)
    String username;

    String password;

    @JsonView(Views.Public.class)
    String email;

    @JsonView(Views.Public.class)
    String phone;

    String address;

    //getters, setters and contructors
}

4.4 This object will be converted into json format and return back to the request.

AjaxResponseBody.java

package com.example.web.model;

import java.util.List;
import com.fasterxml.jackson.annotation.JsonView;
import com.example.web.jsonview.Views;

public class AjaxResponseBody {

    @JsonView(Views.Public.class)
    String msg;

    @JsonView(Views.Public.class)
    String code;

    @JsonView(Views.Public.class)
    List result;

    //getters and setters
}

Note
@JsonViewは、Springフレームワークではなく、Jacksonライブラリに属しています。

5. jQuery Ajax

JSPで、単純な検索フォームを作成し、jQuery$.ajaxを使用してフォームリクエストを送信します。

welcome.jsp

<%@page session="false"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>















    
        
            Spring 4 MVC Ajax Hello World
        
    




    
        Search Form
        


        

        
            
                Username
                
                    
                
            
            
                Email
                
                    
                
            

            
                
                    
                
            
        

    




    
        
            © Mkyong.com 2015

6. Demo

6.1 http://localhost:8080/spring4ajax/

6.2 Empty field validation.

6.3 Search by username.

6.4. メールで検索。

5. Chromeブラウザ、検査要素、ネットワークタグ。

7. このプロジェクトを実行するには？

7.1 Clone the source code from Github

$ git clone https://github.com/example/spring4-mvc-ajax-example

7.2 Run the embedded Jetty container.

$ mvn jetty:run

7.3 Visit this URL – http://localhost:8080/spring4ajax/

ソースコードをダウンロード

Githubリンク–spring4-mvc-maven-ajax-example.git

TOC

Spring 4 MVC Ajax Hello Worldの例