SpringBoot和前端数据交互(js,jQuery,thymeleaf)

一、后台接收URL拼接参数
后台代码:

@GetMapping("/item/{code}")    //对应的链接为:/item/10001
public List<Description> getProduct(@PathVariable("code") String productCode) {
    //your code  
}


二、后台接收查询参数
后台代码:

@GetMapping("/detail")    //对应的链接为:/detail?code=&name=
public String listMaterial(@RequestParam("code") String productCode, @RequestParam("name") String productName) {
    //your code
}


前台代码:

1.通过表单提交

2.通过JavaScript使用Formdata对象提交

 

三、后台接收json
后台代码:

@PostMapping("/add")
public MaterialStandard addProduct(@RequestBody Product product ){
    //your code
}


前台代码:

1.通过JavaScript提交

var product = new Product();
$.ajax({
    url:"/add",
    type:"POST",
    data:JSON.stringify(product),
    contentType: "application/json;charset=UTF-8",
    accept : "*/*",
    success : function () {
        console.log("Successfully");
    }
});    //使用了jQuery,原生JavaScript同理


四、接收文件
后台代码:

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
    //your code
}


前台代码:

1.通过表单提交

2.通过JavaScript使用FormData对象提交

<input type="file" id="file" name="file">
var fileInput = $("#file");
var selectedFile = fileInput[0].files[0];
var data = new FormData();
data.append("file", selectedFile);
$.ajax({
    url: '/upload',
    type: 'POST',
    data: data,
    contentType: false, //不设置内容类型
    processData: false, //不处理数据
    accept : "*/*",
    success : function () {
        console.log("Successfully");
    }
});    使用了jQuery,原生JavaScript同理

五、关于thymeleaf模板和Ajax

前台的视图模版我使用的是thymeleaf,它是SpringBoot官方推荐的一个html5模版引擎,SpringBoot官方不推荐使用jsp,SpringBoot官网也是使用这个模版引擎做的。
通过jQuery的ajax向Controller发送请求,在js回调函数中处理返回的数据,页面我用bootstrap快速的做了一个表格,渲染列表使用了一个叫做avalonjs的迷你mvvm框架,生成虚拟dom,可以参考官网。[链接]:http://avalonjs.coding.me/)

 

HTML页面示例:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
</head>
<body ms-controller="viewmodel">
<h1 th:text="${msg}">Hello World</h1>
<button type="button" class="btn btn-primary" style="margin: 10px;" ms-click="@request">{{@text}}</button>
<table class="table table-striped">
    <thead>
    <tr>
        <td class="active">id</td>
        <td class="success">姓名</td>
        <td class="warning">性别</td>
        <td class="danger">年龄</td>
        <td class="info">角色</td>
    </tr>
    </thead>
    <tbody>
    <tr ms-for="el in @datalist">
        <td >{{el.id}}</td>
        <td >{{el.name}}</td>
        <td>{{el.sex}}</td>
        <td >{{el.age}}</td>
        <td >{{el.role}}</td>
    </tr>
    </tbody>
</table>
</body>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/avalon.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/myscript.js}"></script>
</html>

js文件:

var viewmodel = avalon.define({
    //id必须和页面上定义的ms-controller名字相同,否则无法控制页面
    $id: "viewmodel",
    datalist: {},
    text: "请求数据",

    request: function () {
        $.ajax({
            type: "post",
            url: "/hello/data",    //向后端请求数据的url
            data: {},
            success: function (data) {
                $('button').removeClass("btn-primary").addClass("btn-success").attr('disabled', true);

                viewmodel.datalist = data;

                viewmodel.text = "数据请求成功,已渲染";
            }
        });
    }
});


 

  • 8
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值