Spring-Boot-摸索之路-7：Spring-Boot中使用JSP、Ajax

Posted on

案例是动态生成下拉菜单，使用Ajax从Controller请求JSON对象

环境准备

具体环境看上一篇博客

  • 数据库准备

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    -- ----------------------------
    -- Table structure for user
    -- ----------------------------
    DROP TABLE IF EXISTS `user`;
    CREATE TABLE `user` (
      `user_id` int NOT NULL AUTO_INCREMENT,
      `user_password` varchar(255) DEFAULT NULL,
      `user_email` varchar(255) DEFAULT NULL,
      `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
      `update_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
      `is_delete` tinyint DEFAULT '0',
      `role_id` int DEFAULT NULL,
      `user_dtl_id` int DEFAULT NULL,
      PRIMARY KEY (`user_id`) USING BTREE,
      KEY `role_id` (`role_id`),
      KEY `user_dtl_id` (`user_dtl_id`),
      CONSTRAINT `role_id` FOREIGN KEY (`role_id`) REFERENCES `role` (`role_id`),
      CONSTRAINT `user_dtl_id` FOREIGN KEY (`user_dtl_id`) REFERENCES `user_dtl` (`user_dtl_id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

    -- ----------------------------
    -- Records of user
    -- ----------------------------
    BEGIN;
    INSERT INTO `user` VALUES (1, '666666', 'xxxxxxxx@126.com', '2020-02-13 11:50:32', '2020-02-13 11:50:32', 0, 1, 1);
    INSERT INTO `user` VALUES (2, '123456', 'xxxxxxx@126.com', '2020-02-13 12:11:01', '2020-02-13 12:11:01', 0, 1, NULL);
    INSERT INTO `user` VALUES (3, '123456', 'xxxxxx@qq.com', '2020-02-13 12:14:10', '2020-02-13 12:14:10', 0, 1, NULL);
    INSERT INTO `user` VALUES (4, '123456', 'xxxxxx@qq.com', '2020-02-13 12:13:45', '2020-02-13 12:13:45', 0, 1, NULL);
    INSERT INTO `user` VALUES (5, '123456', 'xxxxxx@126.com', '2020-02-13 12:14:34', '2020-02-13 12:14:34', 0, 1, NULL);
    INSERT INTO `user` VALUES (6, '123456', 'xxxxxx@qq.com', '2020-02-16 04:37:28', '2020-02-16 04:37:28', 0, 1, NULL);
    COMMIT;

创建一个JSP文件

Test.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%--
  Created by IntelliJ IDEA.
  User: allwayz
  Date: 2020/2/18
  Time: 01:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <%--下拉菜单--%>
    <select id="user" >
        <option>
            user
        </option>
    </select>
</body>
</html>

创建Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Controller
public class IndexController {
    //自动注入
    @Autowired
    private UserMapper userMapper;
    @RequestMapping("/Test")
    public String test(){
        return "test";
    }
    
    /**
     *
     * @return
     */
    @RequestMapping("/showUser")
    @ResponseBody
    public List<User> showUser() {
        List<User> userList = userMapper.selectList(new QueryWrapper<User>());
        return userList;
    }
}

引入Jquery包

jquery库

1
<script src="js/jquery-3.4.1.js"></script>

Ajax发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
        $(document).ready(function () {
            $.ajax({
                type:"GET",
                url:"showUser",
                dataType: "json",
                success: function (data) {
                    var str ="<div><select>"
                    for(i=0;i<data.length;i++){
                        str +="<option value='"+data[i].user_email+"'>"+data[i].user_email+"</option>";
                    }
                    str +="</select></div>"
                    $("#user").html(str)
                }
            });
        })
</script>

运行程序就可以看到下拉菜单被自动加载了

Reference

Allwayz