Un ejemplo simple de SpringMVC + JQuery Ajax

1. Introducción a Ajax:
AJAX = JavaScript asincrónico y XML (JavaScript asincrónico y XML) es una tecnología para intercambiar datos con el servidor.
En resumen, sin recargar toda la página web, AJAX carga los datos en segundo plano y los muestra en la página web.

Métodos comunes:

$.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('结束')
    }
})

Por supuesto que hay$.get(),$.post () y así sucesivamente.
Para obtener más información, consulte w3c

En segundo lugar, la implementación de la demostración. Después de
hablar sobre el papel, siento que es muy simple. Después de hablar sobre el concepto, todavía tenemos que ser específicos.
La demostración es muy simple, utilizando SpringMVC + Ajax para completar una consulta simple y mostrar la información correspondiente de acuerdo con el ID de salida. Tenga en cuenta que la página no se actualizará.

El proyecto se basa en Maven.
1. Primero está el archivo 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. Clase de entidad:

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.controlador

@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.Archivo de configuración 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. archivo de configuración 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. El archivo js que implementa query-ajax.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. Inicio 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. Interfaz de consulta 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. Pantalla de resultado final:
ingrese la identificación, haga clic para consultar la información del usuario correspondiente y luego muéstrela en la interfaz

Por supuesto, esto es solo una demostración introductoria simple, el uso específico aún debe combinarse con el negocio.

Referencia:
w3c
mkyong