SpringBoot Ajax请求Json数据

SpringBoot Ajax请求Json数据

SpringBoot Ajax请求Json数据

使用ajax技术从服务器请求数据, 在不刷新整个页面的情况下, 展示到页面

前期准备

创建springboot项目, 引入依赖:

spring web, thymeleaf, mybatis, jdbc api, mysql Driver, lombok

编写配置文件

编写实体类

Activity实体类

这里用到两个注解

@DateTimeFormat(pattern = "yyy-MM-dd")

此注解用于描述属性或set方法, 告诉spring mvc按指定格式接收数据, 默认格式为yyyy/MM/dd HH:mm:ss

例如:

public class Activity {
	private Long id;
	private String title;
	// 次注解用于描述属性或set方法, 告诉spring mvc按指定格式接收数据
	@DateTimeFormat(pattern = "yyy-MM-dd")
    private Date startTime;
	@DateTimeFormat(pattern = "yyy-MM-dd")
    private Date endTime;
}

前端显示指定日期的格式, thymeleaf支持日期格式化:

格式: ${#calendars.format(日期对象,格式)}

格式: 年-月-日时:分:秒 -> yyyy-MM-dd HH:mm:ss

Today is: <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>

@JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8")

此注解用来告诉日期类型数据转为json字符串的时候, 日期指定的格式, 对应其get方法

pattern: 格式

timezone: 时区, 必须设置, 否则可能差8小时

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Activity {
	private Long id;
	private String title;
	private String category;
	// 次注解用于描述属性或set方法, 告诉spring mvc按指定格式接收数据
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm") // 应用场景对应set方法
	@JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8") // 注解用于描述属性的get方法
	private Date startTime;
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
	@JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8")
	private Date endTime;
	private String remark;
	private Integer state;
	private Date createdTime;
	private String createdUser;
}

并完成完成对应的增, 删, 查操作

包括service, dao代码略

编写前端

用来展示数据

<table class="table">
    <thead>
        <tr>
            <th><input type="checkbox">全选</th>
            <th>名称</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态</th>
            <th colspan="2">操作</th>
        </tr>
    </thead>
    <tbody id="tbodyId">
        <tr>
            <!-- 一个加载中的动态图 -->
            <td colspan="6"><img alt="" src="/img/loading.gif"
                                 style="display: block; margin: 80px auto;"></td>
        </tr>
    </tbody>
</table>

编写js代码发送ajax请求

// 基于ajax技术向服务端发送异步请求, 获取数据, 然后更新到页面上
function doGetActivitys() {
    // 1. 定义url
    var url = "doFindActivitys";
    // 2. 请求参数
    // 3. 发送异步请求, 处理响应结果
    // 向服务器发送Get请求
    $.get(url, function(result) { // 用于处理结果
        // 获取tbody对象
        var tBody = $("#tbodyId");
        // 清空tbody的内容
        tBody.empty();
        // 迭代result对象, 将数据填充到tbody
        result.forEach(item => {
            tBody.append(doCreateRow(item));
        });
        // 第二种遍历方式
        /*
        for(var i = 0; i < result.length; i ++) {
            // 创建行
            var tr = doCreateRow(result[i]);
            // 将行追加到tbody
            tBody.append(tr);
        }
        */
    }, "json");
}

// 创建一行数据
function doCreateRow(item) {
    return `<tr>
                <td> <input type='checkbox' value=${item.id}> </td>
                <td> ${item.title} </td>
                <td> ${item.startTime} </td>
                <td> ${item.endTime} </td>
                <td> ${item.state} </td>
                <td> <button type='button' class='btn btn-danger btn-sm' onclick='doDeleteById(${item.id})'>delete</button> </td>
            </tr>`;
    // 第二种方式
    /*
    return "<tr>" +
                "<td><input type='checkbox' value=" + item.id + "></td>" +
                "<td>" + item.title + "</td>" + 
                "<td>" + item.startTime + "</td>" + 
                "<td>" + item.endTime + "</td>" + 
                "<td>" + item.endTime + "</td>" + 
                "<td>" + item.state + "</td>" + 
            "</tr>";
    */
}

Controller处理请求

springboot自带了json处理, 返回List对象的时候自动转位json字符串, 但是需要加上@ResponseBody注解

@RequestMapping("/activity/doFindActivitys")
@ResponseBody 
// 假如方法返回值为对象(不包含字符串, 直接量),
// spring MVC可以将其装换为json格式字符串
public List<Activity> doFindActivitys() {
    return activityService.findActivity();
}

这样访问我们的页面的时候就会出现数据了

同理, 我们也可以实现新增或删除的操作

新增

编写前端

新增的时候我们可以使用bootstrap的模态框, 不需要新建页面

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <!-- 模态框内容 -->
                <form action="" method="post" id="myform">
                    <input type="text" name="id" hidden="true">
                    <div class="form-group">
                        <label for="titleId">标题</label> <input type="text"
                                                               class="form-control" id="titleId" name="title"
                                                               placeholder="please input title">
                    </div>
                    <div class="form-group">
                        <label for="categoryId">类型</label> <input type="text"
                                                                  class="form-control" id="categoryId" name="category"
                                                                  placeholder="please input category">
                    </div>
				
                 <!-- ...等表单 -->
                    
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="doSaveOrUpdate()">Save changes</button>
            </div>
        </div>
    </div>
</div>

打开模态框的按钮

<button type="button" class="btn btn-primary" data-toggle="modal"
			data-target="#myModal">创建活动</button>

js发送请求

function doSaveOrUpdate() {
    // 1. 定义url
    var url = "/activity/doSaveObject";
    // 2. 获取表单数据
    var params = $("form").serialize(); // 直接获取表单中input元素的name属性的值, 并构建字符串
    console.log("params", params);
    // 3. 异步提交数据并处理返回结果
    $.post(url, params, function(result){
     	$('#myform')[0].reset();
        // 给出信息
        alert(result);
        // 手动隐藏模态框
        $("#myModal").modal('hide');
        // 重新查询, 刷新页面
        doGetActivitys();
    })
    /*
    $.ajax({
    	"url": url, // 请求url
    	"method": "post", // 请求方式
    	"dataType": "text", // 服务端相应数据类型
    	"data": params, // 向服务器传递参数
    	"success": function(result) { // xhr.readyState==4&&xhr.status.statue==200
    		alert(result);
    		$("#myModal").modal('hide');
    		doGetActivitys();
    	}
    });
    */
}

controller处理请求

@RequestMapping("/activity/doSaveObject")
@ResponseBody
public String doSaveObject(Activity a) {
    activityService.insertObject(a);
    return "save ok";
}

现在新增请求就写好了

删除

编写前端

js发送请求

function doDeleteById(id) {
    if (!confirm("确定删除吗?")) return;
    // 定义url
    var url = "doDeleteById";
    // 定义参数
    var params = "id=" + id;
    // 发送异步请求操作
    // 基于JQuery中的post函数发送异步请求
    $.post(url, params, function(result){
        // 处理结果
        alert(result);
        doGetActivitys();
    });
}

controller处理请求

@RequestMapping("/activity/doDeleteById")
@ResponseBody
public String doDeleteById(Integer id) {
    activityService.doDeleteById(id);
    return "delete ok";
}

删除也实现了

JSON扩展

json本质是一个字符串

springboot会帮你把对象转为json格式

JQuery在前端也会帮你自动把json转为js对象

对象转json注意

如果说, 有一个实体类

class User {
    private String name,
    private String age
}

假如我们controller中方法的返回值是User对象, 那么json格式为

{
    "name": "张三",
    "age": 34
}

如果返回的是一个User对象的集合呢, 就是如下的形式

[
    {
        "name": "sam",
     	"age": 32
    },
    {
        "name": "jack",
        "age": 31
    },
    {
        "name": "bob",
        "age": 23
    }
]

甚至你可以生成更加复杂的形式

{
    "name": "张三",
    "age": 23,
    "teachers": [
        {"name":"张老师", "age": 45},
        {"name":"李老师", "age": 55}
    ]
}

我相信看到这种形式的json, 你可能已经想象到后台返回的对象是什么样子了

扩展: js ES6拼接字符串

之前我们拼接字符串最常用的是使用+加号拼接或者斜杠

javascript ES6 提供了`` 号拼接字符串, 例如:

var user = {
	name: "sam",
	age: "11"
}
var str = `我的名字是${user.name'}, 我的年龄是${user.age}`;

ajax发送请求时, 声明返回的数据是json还是text, 如果写错的话, 可能不会执行回调函数

扩展: ajax发送请求

$,ajax()

格式: $.ajax(url, [setting])

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

例如:

$.ajax({
    "url": url, // 请求url
    "method": "post", // 请求方式
    "dataType": "text", // 服务端相应数据类型常用json或text
    "data": params, // 向服务器传递参数
    "success": function(result) { // xhr.readyState==4&&xhr.status.statue==200回调函数
        // 执行内容
    }
});

$.get()

格式: $.get(url, [data], [callback], [type])

通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数url,[data],[callback],[type]

url:待载入页面的URL地址
data:待发送 Key/value 参数。

可以是字符串, 例如: id=3%name=sam

也可以是键值对: { name: "John", time: "2pm" }
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

例如:

$.get("/findAll", { name: "John", time: "2pm" },function(data){
	alert("Data Loaded: " + data);
});

$.post()

格式: $.post(url, [data], [callback], [type])

和get请求类似, 只是提交方式不同而已

案例:

$.post("/findAll", { name: "John", time: "2pm" },function(data){
	alert("Data Loaded: " + data);
});