SpringBoot ajax Restful整合

Restful风格是现在开发中最常用的一种软件设计风格,springMvc在整合Restful风格的时候还需要配

置“hiddenHttpMethodFilter”,而SpringBoot 不需要,SpringBoot整合Restful只需要一下几个步骤:

Step1.新建一个SpringBoot项目,导入依赖,并解决跨域问题。

Step2.新建一个RestController来接收客户端的请求,代码如下:

package com.reset.controller;
 
import com.reset.model.RestMessgae;
import org.springframework.web.bind.annotation.*;
 
import java.util.Map;
 
/**
 * Created by chendai on 2018/3/19.
 */
@RestController
public class TestController {
 
    /**
     * Restful Get请求测试
     */
    @GetMapping(value = "testRest/{id}")
    public RestMessgae testGetResetful(@PathVariable String id){
       RestMessgae restMessgae = new RestMessgae();
        System.out.println(id);
        return restMessgae;
    }
 
    /**
     * Restful Post请求测试
     */
    @PostMapping(value = "testRest")
    public String testPostRestful(@RequestBody Map<String,Object> map){
        String id = (String)map.get("id");
        System.out.println(id);
        return id;
    }
 
    /**
     * Restful Delete请求测试
     */
    @DeleteMapping(value = "testRest")
    public String testDeleteResetful(@RequestBody Map<String,Object> map){
        String id = (String) map.get("id");
        System.out.println(id);
        return id;
    }
 
    /**
     * Restful put请求测试
     */
    @PutMapping(value = "testRest")
    public String testPutResetful(@RequestBody Map<String,Object> map){
        String id = (String) map.get("id");
        System.out.println(id);
        return id;
    }
}

注解说明:@RestController:代表的是这个类是用Restful风格来访问的,整个类的返回的数据都是“json”格式的。
                  @GetMapping 就是@RequestMapping(value="XXX",method=RequestMethod.Get)
                  value="testRest/{id}"代表访问的URL是“http://host:port/testRest/用户id”
                  @PathVariable将某个动态参数放到url中
                   @DeleteMapping、@PostMapping、@PutMapping含义和@GetMapping相同。
这样后台的Rest接口就完成了,前台发送请求是这样的:

var httpUrl = "http://localhost:8080";
//    发送get请求
    function testRestfulGet() {
        $.ajax({
            type: "GET",
            url: httpUrl + "/testRest/11",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            success: function (result) {
                console.log(result);
            },
            error: function () {
                console.log('错误')
            }
        })
    }
//发送post请求
    function testRestfulPost(){
        var datas = {id:"123456"};
        $.ajax({
            type: "POST",
            url: httpUrl + "/testRest",
            dataType:"json",
            data: JSON.stringify(datas),
            contentType:"application/json;charset=utf-8",
            success: function (result) {
                console.log(result);
            },
            error:function () {
                console.log('错误')
            }
        })
    }
//发送delete请求
    function testRestfulDelete(){
        var datas = {id:"123456"};
        $.ajax({
            type: "DELETE",
            url: httpUrl + "/testRest",
            dataType:"json",
            data:JSON.stringify(datas),
            contentType:"application/json;charset=utf-8",
            success: function (result) {
                console.log(result);
            },
            error:function () {
                console.log('错误')
            }
        })
    }
//发送put请求
    function testRestfulPut(){
        var datas = {id:"123456"};
        $.ajax({
            type: "PUT",
            url: httpUrl + "/testRest",
            dataType:"json",
            data:JSON.stringify(datas),
            contentType:"application/json;charset=utf-8",
            success: function (result) {
                console.log(result);
            },
            error:function () {
                console.log('错误')
            }
        })
}
请求说明:get请求一般用于查询操作,post请求一般用于添加操作,delete请求一般用于删除操作,put请求一般用于修改操作。
以上代码亲测好用
posted @ 2020-05-25 22:40  QianTM  阅读(517)  评论(0编辑  收藏  举报