SpringMVC框架-23：restful风格

最新推荐文章于 2024-10-22 21:55:39 发布

原创最新推荐文章于 2024-10-22 21:55:39 发布 · 151 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#springmvc

SpringMVC框架专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用jQuery发起GET、POST、PUT和DELETE请求来与RESTful风格的API进行交互，同时展示了如何利用layui框架和jQuery表单序列化插件处理表单数据。

声明：使用了layui框架，jquery，jquery表单序列化插件

restful风格地址参数：

http://localhost:8080/goods/1 查询GET
http://localhost:8080/goods 新增POST
http://localhost:8080/goods 更新PUT
http://localhost:8080/goods/1 删除DELETE

发送get请求

前端代码

//查找
 $("#find").click(function () {
 $.ajax({
 type: "get",
 url: "/myfind/2",
 success: function (msg) {
 alert(msg);
 },
 error: function () {
 alert("失败");
 }
 });
 });

后端代码

@GetMapping("/myfind/{id}")
 @ResponseBody
 @ApiOperation(value = "查询", httpMethod = "GET")
 public String myfind(@PathVariable Integer id) {
 System.out.println("传入的参数是" + id);
 return "成功查找";
 }

发送post请求

前端代码

//保存
 $("#creat").click(function () {
 $.ajax({
 type: "post",
 url: "/myadd/2",
 success: function (msg) {
 alert(msg);
 },
 error: function () {
 alert("失败");
 }
 });
 });

后端代码

@PostMapping("/myadd/{id}")
 @ResponseBody
 @ApiOperation(value = "添加", httpMethod = "POST")
 public String myadd(@PathVariable Integer id) {
 System.out.println("添加的参数" + id);
 return "成功添加";
 }

发送put请求

前端代码

//更新
 $("#update").click(function () {
 $.ajax({
 type: "put",
 url: "/myupdate/345",
 success: function (msg) {
 alert(msg);
 },
 error: function () {
 alert("失败");
 }
 });
 });

后端代码

@PutMapping("/myupdate/{id}")
 @ResponseBody
 @ApiOperation(value = "更新", httpMethod = "PUT")
 public String myupdate(@PathVariable Integer id) {
 System.out.println("传入的参数是" + id);
 return "成功更新";
 }

发送delete请求

前端代码

//删除
 $("#delete").click(function () {
 $.ajax({
 type: "delete",
 url: "/mydelete/34",
 success: function (msg) {
 alert(msg);
 },
 error: function () {
 alert("失败");
 }
 });
 });

后端代码

 @DeleteMapping("/mydelete/{id}")
 @ResponseBody
 @ApiOperation(value = "删除", httpMethod = "DELETE")
 public String mydelete(@PathVariable Integer id) {
 System.out.println("传入的参数是" + id);
 return "成功删除";
 }

使用表单

前端代码

<form id="userForm" class="layui-form" action="">
 <div class="layui-form-item">
 <label class="layui-form-label">请输入</label>
 <div class="layui-input-block">
 <input type="text" name="userName" placeholder="请输入标题" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">性别</label>
 <div class="layui-input-block">
 <input type="text" name="userSex" placeholder="请输入标题" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">年龄</label>
 <div class="layui-input-block">
 <input type="text" name="userAge" placeholder="请输入标题" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <div class="layui-input-block">
 <button id="submitForm" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
 </div>
 </div>
</form>

js部分

//表单
 $(function () {
 $("#submitForm").click(function () {
 //这里我们就是用的插件代码，使获取表单的数据并序列化数据，
 var userData = $("#userForm").serializeJSON();
 alert(userData);
 $.ajax({
 type: "post",
 contentType:'application/json',
 url: "/formData",
 data: userData,
 success: function (msg) {
 alert(msg);
 },
 error: function () {
 alert("失败");
 }
 });
 });
 });

后端代码

@PostMapping("/formData")
 @ResponseBody
 @ApiOperation(value = "表单添加", httpMethod = "POST")
 public String formData(@RequestBody User user) {
 System.out.println("添加的参数" + user);
 return "成功添加";
 }

domain类

@Data
public class User {
 private String userName;
 private String userSex;
 private Integer userAge;
}