Spring Boot Ajax实例(十六)

快来打我* 2022-05-16 11:18 155阅读 0赞

> 这篇博文主要用于新手学习Spring Boot，同时也记录自己学习的过程…  
> 文章内容主要来源于[易百教程][Link 1]

本文将展示如何使用jQuery.ajax将HTML表单请求发送到Spring REST API并返回JSON响应。  
使用的工具：

*  Spring Boot 2.0.3.RELEASE
 *  Spring 2.0.3.RELEASE
 *  Maven 3
 *  jQuery
 *  Bootstrap 3

**1．项目结构**

--------------------

创建一个标准的Maven项目：spring-boot-ajax-example，用于演示在Spring Boot中使用Ajax技术，搜索用户信息。其结构如下图所示-  
![这里写图片描述][2018082014292224]  
  
  
**2．项目依赖**

--------------------

文件：*pom.xml*

<?xml version="1.0" encoding="UTF-8"?>
    <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/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.th</groupId>
        <artifactId>spring-boot-ajax-example</artifactId>
        <packaging>jar</packaging>
        <version>1.0</version>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.0.3.RELEASE</version>
        </parent>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
    
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context</artifactId>
                <version>5.0.2.RELEASE</version>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>bootstrap</artifactId>
                <version>3.3.7</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
                <scope>provided</scope>
            </dependency>
    
        </dependencies>
        <build>
            
            <finalName>springboot</finalName>
    
            <plugins>
                
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
    
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-war-plugin</artifactId>
                    <configuration>
                        <warSourceExcludes>src/main/resources/**</warSourceExcludes>
                        <warName>springboot</warName>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </project>

**3．Spring REST API**

--------------------

REST控制器，接受一个SearchCriteria并返回一个ResponseEntity。  
一个正常的Spring Boot依赖和一些webjars资源。文件：*SearchController.java*如下所示-

package com.th.controller;
    
    import java.util.List;
    import java.util.stream.Collectors;
    import javax.validation.Valid;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.ResponseEntity;
    import org.springframework.validation.Errors;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RestController;
    import com.th.model.AjaxResponseBody;
    import com.th.model.SearchCriteria;
    import com.th.model.User;
    import com.th.service.UserService;
    
    @RestController
    public class SearchController {
    
        UserService userService;
    
        @Autowired
        public void setUserService(UserService userService) {
            this.userService = userService;
        }
    
        @PostMapping("/api/search")
        public ResponseEntity<?> getSearchResultViaAjax(@Valid @RequestBody SearchCriteria search, Errors errors) {
    
            AjaxResponseBody result = new AjaxResponseBody();
    
            if (errors.hasErrors()) {
    
                result.setMsg(
                        errors.getAllErrors().stream().map(x -> x.getDefaultMessage()).collect(Collectors.joining(",")));
                return ResponseEntity.badRequest().body(result);
            }
    
            List<User> users = userService.findByUserNameOrEmail(search.getUsername());
            if (users.isEmpty()) {
                result.setMsg("no user found!");
            } else {
                result.setMsg("success");
            }
    
            result.setResult(users);
    
            return ResponseEntity.ok(result);
        }
    }

一些其他的POJO类，它们分别如下所示-  
文件：*AjaxResponseBody.java*

package com.th.model;
    
    import java.util.List;
    
    public class AjaxResponseBody { 
    
        private String msg;
        private List<User> result;
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public List<User> getResult() {
            return result;
        }
    
        public void setResult(List<User> result) {
            this.result = result;
        }
    
    }

文件：*User.java*

package com.th.model;
    
    public class User { 
    
        private String username;
        private String password;
        private String email;
    
        public User(String username, String password, String email) {
            super();
            this.username = username;
            this.password = password;
            this.email = email;
        }
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    
        public String getEmail() {
            return email;
        }
    
        public void setEmail(String email) {
            this.email = email;
        }
    
        @Override
        public String toString() {
            return "User [username=" + username + ", password=" + password + ", email=" + email + "]";
        }
    
    }

验证器类：*SearchCriteria.java*

package com.th.model;
    
    import javax.validation.constraints.NotBlank;
    
    public class SearchCriteria { 
    
        @NotBlank(message = "username can't empty!")
        private String username;
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
    }

用于初始化一些用户进行搜索的服务。文件：*UserService.java* 所下所示-

package com.th.service;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.stream.Collectors;
    
    import javax.annotation.PostConstruct;
    
    import org.springframework.stereotype.Service;
    
    import com.th.model.User;
    
    @Service
    public class UserService { 
    
        private List<User> users;
    
        // Love Java 8
        public List<User> findByUserNameOrEmail(String username) {
    
            List<User> result = users.stream().filter(x -> x.getUsername().equalsIgnoreCase(username)).collect(Collectors.toList());
    
            return result;
    
        }
        // Init some users for testing
        @PostConstruct
        private void iniDataForTesting() {
            users = new ArrayList<User>();
    
            User user1 = new User("maxsu", "password111", "maxsu@yahoo.com");
            User user2 = new User("yiflow", "password222", "yflow@yahoo.com");
            User user3 = new User("minaxu", "password333", "minaxu@yahoo.com");
            User user4 = new User("minalee", "password333", "minalee@yahoo.com");
            User user5 = new User("yiiflow", "password333", "yiiflow@gmail.com");
    
            users.add(user1);
            users.add(user2);
            users.add(user3);
            users.add(user4);
            users.add(user5);
        }
    }

Spring Boot启动器（程序入口），参考一下代码实现。文件：*SpringBootWebApplication.java*如下所示-

package com.th;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class SpringBootWebApplication { 
    
        public static void main(String[] args) {
            SpringApplication.run(SpringBootWebApplication.class, args);
        }
    }

**4．HTML表单+jQuery Ajax**

--------------------

一个简单的HTML表单，用bootstrap框架装饰。  
文件：index.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Spring Boot Ajax实例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
        <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
    </head>
    <body>
       <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Spring Boot</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container" style="min-height: 500px">
            <div class="starter-template">
                <h1>Spring Boot AJAX 示例</h1>
                <div id="feedback"></div>
                <form class="form-horizontal" id="search-form">
                    <div class="form-group form-group-lg">
                        <label class="col-sm-2 control-label">用户名：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username"/>
                        </div>
                    </div>
    
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" id="bth-search" class="btn btn-primary btn-lg">搜索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
    </html>

获取HTML表单，并通过JSON.stringify将搜索条件转换为JSON格式，并通过jQuery.ajax发送POST请求。  
文件：*main.js* 所下所示-

$(document).ready(function () { 
        $("#search-form").submit(function (event) { 
            //stop submit the form, we will post it manually.
            event.preventDefault();
            fire_ajax_submit();
        });
    
    });
    
    function fire_ajax_submit() { 
        var search = {}
        search["username"] = $("#username").val();
        //search["email"] = $("#email").val();
        $("#btn-search").prop("disabled", true);
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/api/search",
            data: JSON.stringify(search),
            dataType: 'json',
            cache: false,
            timeout: 600000,
            success: function (data) { 
                var json = "<h4>Ajax Response</h4><pre>"
                    + JSON.stringify(data, null, 4) + "</pre>";
                $('#feedback').html(json);
                console.log("SUCCESS : ", data);
                $("#btn-search").prop("disabled", false);
            },
            error: function (e) { 
                var json = "<h4>Ajax Response</h4><pre>"
                    + e.responseText + "</pre>";
                $('#feedback').html(json);
                console.log("ERROR : ", e);
                $("#btn-search").prop("disabled", false);
            }
        });
    }

5．运行示例  
打开浏览器，访问以下地址：[http://localhost:8080/][http_localhost_8080] ， 应该会看到如下页面 -  
![这里写图片描述][20180820144129384]  
如果没有输入用户名，直接点击“搜索”，那么应该会看到以下结果 -  
![这里写图片描述][20180820144144987]  
如果输入一个存在的用户名:maxsu，直接点击“搜索”，那么应该会看到以下结果 -  
![这里写图片描述][20180820144214793]

**相关文章：**

*  [Spring Boot教程(一)][Spring Boot]
 *  [Spring Boot是什么？(二)][Spring Boot 1]
 *  [Spring Boot主要目标(三)][Spring Boot 2]
 *  [新项目为什么需要Spring Boot？(四)][Spring Boot 3]
 *  [Spring Boot核心和限制(五)][Spring Boot 4]
 *  [Spring Boot优点和缺点(六)][Spring Boot 5]
 *  [Spring Boot入门(七)][Spring Boot 6]
 *  [Spring Boot安装(八)][Spring Boot 7]
 *  [Spring Boot应用程序开发入门(九)][Spring Boot 8]
 *  [Spring Boot JSP应用实例(十)][Spring Boot JSP]
 *  [Spring Boot将WAR文件部署到Tomcat(十一)][Spring Boot_WAR_Tomcat]
 *  [Spring Boot Hello World(Thymeleaf)示例(十二)][Spring Boot Hello World_Thymeleaf]
 *  [Spring Boot非web应用程序实例(十三)][Spring Boot_web]
 *  [Spring Boot @ConfigurationProperties实例(十四)][Spring Boot _ConfigurationProperties]
 *  [Spring Boot SLF4J日志实例(十五)][Spring Boot SLF4J]

[Link 1]: https://www.yiibai.com/spring-boot/
[2018082014292224]: /images/20220516/e3e417bc896248fdbc09f44849cd58ca.png
[http_localhost_8080]: http://localhost:8080/
[20180820144129384]: /images/20220516/ced5795bcba04b199bea0b49e1843dd0.png
[20180820144144987]: /images/20220516/67b4479ee7f14189855ff873545354a0.png
[20180820144214793]: /images/20220516/0fe4ccdb372b4782a1f7b50490a94876.png
[Spring Boot]: https://blog.csdn.net/ththcc/article/details/81631532
[Spring Boot 1]: https://blog.csdn.net/ththcc/article/details/81632203
[Spring Boot 2]: https://blog.csdn.net/ththcc/article/details/81632326
[Spring Boot 3]: https://blog.csdn.net/ththcc/article/details/81632670
[Spring Boot 4]: https://blog.csdn.net/ththcc/article/details/81632792
[Spring Boot 5]: https://blog.csdn.net/ththcc/article/details/81632923
[Spring Boot 6]: https://blog.csdn.net/ththcc/article/details/81632964
[Spring Boot 7]: https://blog.csdn.net/ththcc/article/details/81633063
[Spring Boot 8]: https://blog.csdn.net/ththcc/article/details/81660779
[Spring Boot JSP]: https://blog.csdn.net/ththcc/article/details/81660830
[Spring Boot_WAR_Tomcat]: https://blog.csdn.net/ththcc/article/details/81660865
[Spring Boot Hello World_Thymeleaf]: https://blog.csdn.net/ththcc/article/details/81660896
[Spring Boot_web]: https://blog.csdn.net/ththcc/article/details/81660975
[Spring Boot _ConfigurationProperties]: https://blog.csdn.net/ththcc/article/details/81661208
[Spring Boot SLF4J]: https://blog.csdn.net/ththcc/article/details/81661266