Ajax的数据传递

# Ajax的控制器与视图层数据传递

# 1、Ajax的控制器传递数据给视图层

Get请求通过ID查询博客文章

@GetMapping("/blog/{blogid}")
public BlogEntity getBlogByID(@PathVariable("blogid") int blogid) {
    return blogService.getBlogByID(blogid);
}

1
2
3
4

# 1.1 基于Layui的数据分页显示模糊查询

分页查询所有的博客列表，并实现模糊查询@GetMapping

Controller：

@GetMapping("/blog")
public ResponseData<BlogEntity> getBlog(
    @RequestParam(name = "keywords", required = true, defaultValue = "") String keywords,
    @RequestParam(name = "page", required = true, defaultValue = "1") int page,
    @RequestParam(name = "limit", required = true, defaultValue = "10") int limit) {
    PageData<BlogEntity> blogList = blogService.getBlogList(page, limit, keywords);
    ResponseData<BlogEntity> responseData = new ResponseData(0, "操作成功", blogList.getTotal(), blogList.getData());
    return responseData;
}

1
2
3
4
5
6
7
8
9

JS：

table.render({
    elem: '#user-table',
    url: '../../../../admin/getarticle',
    page: true,
    cols: cols,
    skin: 'line',
    toolbar: '#user-toolbar',
    defaultToolbar: [{
        title: '刷新',
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
    }, 'filter', 'print', 'exports']
});

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2、Ajax的视图层传递数据控制器

# 2.1 普通值的传递

# 【示例】基于Layui删除一篇文章

JS：

window.remove = function (obj) {
    layer.confirm('确定要删除此文章', {
        icon: 3,
        title: '提示'
    }, function (index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
            url: '../../../../admin/delarticle/' + obj.data['article_id'],
            dataType: 'json',
            type: 'delete',
            success: function (result) {
                layer.close(loading);
                layer.msg(result.msg, {
                    icon: 1,
                    time: 1000
                });
            }
        })
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Contorller：

@DeleteMapping("/delarticle/{articleID}")
public ResponseData deleteArticleByID(@PathVariable("articleID") int articleID) {
    ResponseData responseData = articleService.deleteArticleByID(articleID);
    return responseData;
}

1
2
3
4
5

# 【示例】基于Layui修改文章状态

JS：

form.on('switch(article-status)', function (obj) {
    let status = obj.elem.checked ? 1 : 0
    $.ajax({
        url: '../../../../admin/updatest/'+this.value+"/"+status,
        type: 'put',
        success: function (res) {
            layer.tips(res.msg, obj.othis)
        },
    });
});

1
2
3
4
5
6
7
8
9
10

Controller：

@PutMapping("/updatest/{articleStatus}/{articleID}")
public ResponseData updateArticleStatus(
    @PathVariable("articleStatus") int articleStatus,
    @PathVariable("articleID") int articleID) {
    ResponseData responseData = articleService.updateArticleStatus(articleID, articleStatus);
    return responseData;
}

1
2
3
4
5
6
7

# 2.2、富文本编辑器向控制器传值

TinyMCE：功能强大、所见即所得的富文本编辑器👻http://tinymce.ax-z.cn/

【示例】：Layui.css和Layui.js

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">

1
2
3
4
5

【示例】：HTML

<!--layui富文本编辑器-->
<div class="layui-card-body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
        <legend>文章内容</legend>
    </fieldset>
    <textarea id="edit" cols="30" rows="10" name="article_content"></textarea>
    <div class="layui-btn-group" style="margin-top: 10px">
        <button class="layui-btn" lay-submit lay-filter="form-fabu">发布</button>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10

【示例】：Js

<!--Layui富文本编辑器-->
    <script>
    layui.use(['tinymce', 'form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.jquery;

    var tinymce = layui.tinymce
    var edit = tinymce.render({
        elem: "#edit",
        height: 400
    });
    //获取文本框中的值
    edit.getContent();
    form.on('submit(form-fabu)', function (data) {
        data.field.article_content = edit.getContent()
        console.log(data.field.article_content)
        let roleIds = "";
        $('input[type=checkbox]:checked').each(function () {
            roleIds += $(this).val() + ",";
        });
        roleIds = roleIds.substr(0, roleIds.length - 1);
        data.field.roleIds = roleIds;
        console.log(data.field);
        $.ajax({
            url: '../../../../admin/addarticle',
            data: JSON.stringify(data.field),
            dataType: 'json',
            contentType: 'application/json',
            type: 'post',
            success: function (result) {
                if (result.success) {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                } else {
                    layer.msg(result.msg, {icon: 1, time: 1000});
                }
            }
        });
        return false;
    });
});
</script>

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
32
33
34
35
36
37
38
39
40
41

【示例】：添加文章后端Controller控制器

@PostMapping("/addarticle")
public AjaxOperateResponse addArticle(@RequestBody ArticleEntity article) {
    AjaxOperateResponse response = new AjaxOperateResponse(200, articleService.addArticle(article) ? "增加成功" : "增加失败");
    return response;
}

1
2
3
4
5

# 3、其他操作值传递

# 增加操作@PostMapping

@PostMapping("/blog")
public AjaxOperateResponse addBlog(BlogEntity blog) {
    AjaxOperateResponse response = new AjaxOperateResponse(200, "增加成功");
    return response;
}

1
2
3
4
5

@PostMapping("/addarticle")
public AjaxOperateResponse addArticle(@RequestBody ArticleEntity article) {
    AjaxOperateResponse response = new AjaxOperateResponse(200, articleService.addArticle(article) ? "增加成功" : "增加失败");
    return response;
}

1
2
3
4
5

# 修改操作@PutMapping

@PutMapping("/blog/{blogid}")
public AjaxOperateResponse updateBlog(@PathVariable("blogid") int blogid, BlogEntity blog) {
    AjaxOperateResponse response = new AjaxOperateResponse(200, "增加成功");
    return response;
}

1
2
3
4
5

@PutMapping("/updatest/{articleStatus}/{articleID}")
public ResponseData updateArticleStatus(
    @PathVariable("articleStatus") int articleStatus,
    @PathVariable("articleID") int articleID) {
    ResponseData responseData = articleService.updateArticleStatus(articleID, articleStatus);
    return responseData;
}

1
2
3
4
5
6
7

# 删除操作@DeleteMapping

@DeleteMapping("/blog/{blogid}")
public AjaxOperateResponse deleteBlogByID(@PathVariable("blogid") int blogid) {
    AjaxOperateResponse response = new AjaxOperateResponse(200, "删除成功");
    return response;
}

1
2
3
4
5

# 删除所有@DeleteMapping

@DeleteMapping("/blog/")
public AjaxOperateResponse deleteAllBlogByID() {
    AjaxOperateResponse response = new AjaxOperateResponse(200, "批量删除成功");
    return response;
}

1
2
3
4
5

编辑

#SpringMVC

← 非Ajax的数据传递 RestFul通用风格案例→