SpringMVC + JQueryAjaxの簡単な例

1. Ajaxの概要：
AJAX =非同期JavaScriptおよびXML（非同期JavaScriptおよびXML）は、サーバーとデータを交換するためのテクノロジーです。
つまり、AJAXは、Webページ全体をリロードせずに、バックグラウンドでデータをロードしてWebページに表示します。

一般的な方法：

$.ajax({
    url:'http://www.test.com',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'huang',age:23
    },
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
    
    
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){
    
    
        console.log(data)
         console.log('成功')
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
    
    
        console.log('错误')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
    
    
        console.log('结束')
    }
})

もちろんあります$.get(),$.post（）など。
詳細については、w3cを参照してください。

第二に、デモの実装です。
紙で話した後は、とても簡単だと思います。コンセプトについて話した後でも、具体的にする必要があります。
デモは非常に単純で、SpringMVC + Ajaxを使用して単純なクエリを完了し、出力IDに従って対応する情報を表示します。ページは更新されないことに注意してください。

このプロジェクトはMavenに基づいています。
1.最初はpom.xmlファイルです。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>SpringMVC_AJAX</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>SpringMVC_AJAX Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.3.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>4.3.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>4.1.6.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.1</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.5.0</version>
        </dependency>
        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>asm</groupId>
            <artifactId>asm</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    </dependencies>
    <build>
        <finalName>SpringMVC_AJAX</finalName>
    </build>
</project>

2.エンティティクラス：

public class User {
    
    
    private long id;
    private String username;
    private String pswd;

    public User() {

    }

    public User(long id, String username, String pswd) {
        super();
        this.id = id;
        this.username = username;
        this.pswd = pswd;
    }

    public long getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPswd() {
        return pswd;
    }
    public void setPswd(String pswd) {
        this.pswd = pswd;
    }

    @Override
    public String toString() {
        return "User [id=" + id + ", username=" + username + ", pswd=" + pswd
                + "]";
    }
}

3.userDao

public interface UserDao {
    public User addUser(User user);
    public long deleteUser(Long id);
    public User queryOneUser(Long id);
    public User changeUser(User user);
    public List<User> getUserList();
}

4.userDaoImpl

@Repository("userDao")
public class UserDaoImpl implements UserDao {
    
    

    private static List<User> users;
    //为了方便，这里直接构建需要的数据
    {
        users = new ArrayList<User>();
        users.add(new User(101, "Mike", "123"));
        users.add(new User(102, "Huang", "4235"));
        users.add(new User(103, "Mao", "657567"));
    }

    public User addUser(User User) {
        //User.setId(System.currentTimeMillis());
        users.add(User);
        return User;
    }

    public long deleteUser(Long id) {
        for (User User : users) {
            if (User.getId() == id){
                users.remove(User);
                return id;
            }
        }
        return id;
    }

    public User queryOneUser(Long id) {
        User user = new User();
        for (User user2 : users) {
            if (user2.getId() == id){
                return user2;
            }
        }
        return user;
    }

    public User changeUser(User User) {
        for (User s : users) {
            if (s.getId() == User.getId()){
                return User;
            }
        }
        return null;
    }

    public List<User> getUserList() {
        return users;
    }

}

5.コントローラー

@EnableWebMvc
@Controller
public class UserMVC {
    
    

    @Autowired
    private UserDao userDao;

    @RequestMapping(value="jsp/getUser.do") 
    public ModelAndView index(){
        return new ModelAndView("getUser");
    }

    //根据id查询返回相应结果
    @RequestMapping(value="jsp/getUser/{id}") 
    @ResponseBody
    public User getUser(@PathVariable("id") long id){
        User user =  userDao.queryOneUser(id);
        return user;
    }

    //查询所有信息，但是前端没做实现，可以自己试试
    @RequestMapping(value="jsp/getUserList.json") 
    @ResponseBody
    public List<User> getUserList(){
        List<User> list =  userDao.getUserList();
        return list;
    }
}

6.SpringMVC構成ファイルspringmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">                    

     <!-- 启用spring mvc 注解 -->
    <context:annotation-config />
    <!-- scan the package and the sub package -->
    <context:component-scan base-package="com.example"/>

    <!-- don't handle the static resource -->
    <mvc:default-servlet-handler />

    <!-- if you use annotation you must configure following setting -->
    <mvc:annotation-driven />
         <!-- 完成请求和注解POJO的映射 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
    <!-- configure the InternalResourceViewResolver 一种试图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
            id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

7.Web構成ファイルweb.xml

<web-app>
   <display-name>SpringMVC</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/springmvc-servlet.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

8.query-ajax.jsを実装するjsファイル

$(document).ready(function() {
    
    
    $("#searchByUserIdBtn").prop("disabled",false);
    $("#searchByUserIdBtn").on("click", function() {
    
    
    getUserById();
    });
});

function getUserById() {
    
    
    var userId = $("#userId").val();
        $.ajax({
            type : "post",
            url : "getUser/" + userId,
            data : {
                "id" : userId,
            },

            //为了防止重复点击
            beforeSend: function() {
    
    
                enableButton(true);
            },

            //成功
            success : function(data) {
    
    
                console.log("Success:-->>" + data);
                display(data);
            },

            //错误情况
            error : function(error) {
    
    
                console.log("Error:-->>" + error);
                display("Error:Can't get message");
            },

            //请求完成后回调函数 (请求成功或失败之后均调用)。
            complete: function(message) {
    
    
                console.log("Complete:-->>" + message);
                enableButton(false);
            }
        });

    function enableButton(flag) {
    
    
        $("#searchByUserIdBtn").prop("disabled",flag);
    }

    //这里的JSON.stringify可以将json对象转换为字符串
    function display(data) {
    
    
        var userJson = "<h4>Ajax Response</h4><pre>"
                + JSON.stringify(data, null, 4) + "</pre>";
        $("#userList").html(userJson);
    }
}

9.ホームindex.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<a href="getUser.do">click to enter</a><br>
</body>
</html>

10.クエリインターフェイスgetUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<title>Insert title here</title>
</head>
<body>
    <div>
        <div id="userList">
        </div>
        <form>
            UserId:<input id="userId" type="text" ><br>
            <input id="searchByUserIdBtn" type="button" value="SearchByUserId">
        </form>
    </div>
</body>
</html>

11.最終結果の表示：
IDを入力し、クリックして対応するユーザー情報を照会し、フロントエンドに表示します

もちろん、これは単なる入門デモであり、特定の用途をビジネスと組み合わせる必要があります。

参照：
w3c
mkyong