Java Springboot前端提交与接收数据方法

几种html异步提交数据，与Springboot后台控制器接收不同数据类型的方法

1. 表单数据提交

前端ajax提交

var formData = new FormData();
formData.append("cid", "101")
formData.append("status", 0)
formData.append("data", "hello world")
$.ajax({
   type: "post",
    url: "/requestByForm",
    data: formData,
    success: function (result) { console.log(result); },
    error: function (error) { console.log(error); }
});

后台控制器接收

@RequestMapping(value = "/requestByForm", method = RequestMethod.POST)
@ResponseBody
public String requestByForm(@RequestParam("cid") String cid, @RequestParam("status") Integer status, @RequestParam("data") String data) throws Exception {
    if (cid == null) { return "cid is null"; }
    if (status == null) { return "status is null"; }
    if (data == null) { return "data is null"; }
    System.out.println(cid);
    System.out.println(status);
    System.out.println(data);
    
    return "success";
}

2. json对象提交（与json字符串提交不同）

前端ajax提交

$.ajax({
   type: "post",
    url: "/requestByJson",
    data:{
         "cid":"16513211",
         "data":"hello world",
         "status":0
     },
    success: function (result) { console.log(result); },
    error: function (error) { console.log(error); }
});

后台控制器接收

@RequestMapping(value = "/requestByJson", method = RequestMethod.POST)
@ResponseBody
public Result<String> requestByJson(HttpServletRequest request) throws Exception {
    String cid = request.getParameter("cid");
    Integer status = Integer.parseInt(request.getParameter("status"));
    String data = request.getParameter("data");
    if (cid == null) { return "cid is null"; }
    if (status == null) { return "status is null"; }
    if (data == null) { return "data is null"; }
    System.out.println(cid);
    System.out.println(status);
    System.out.println(data);

    return "success";
}

3.1 json字符串提交，后台实体对象解析

前端ajax提交

$.ajax({
   type: "post",
    url: "/requestByJsonMapping",
    data:JSON.stringify({
         "cid":"16513211",
         "data":"hello world",
         "status":0
     }),
    success: function (result) { console.log(result); },
    error: function (error) { console.log(error); }
});

实体对象

public class RequestDemo {
    private String cid;
    private Integer status;
    private String data;
    
    public String getCid() { return cid; }
    public void setCid(String cid) { this.cid = cid; }
    public Integer getStatus() { return status; }
    public void setStatus(Integer status) {  this.status = status; }
    public String getData() { return data; }
    public void setData(String data) { this.data = data; }
}

后台控制器接收

@RequestMapping(value = "/requestByJsonMapping", method = RequestMethod.POST)
@ResponseBody
public Result<RequestDemo> requestByJsonMapping(@RequestBody RequestDemo requestDemo) throws Exception {
    String cid = requestDemo.getCid();
    Integer status = requestDemo.getStatus();
    String data = requestDemo.getData();
	if (cid == null) { return "cid is null"; }
    if (status == null) { return "status is null"; }
    if (data == null) { return "data is null"; }
    System.out.println(cid);
    System.out.println(status);
    System.out.println(data);

    return "success";
}

3.2 json字符串提交，后台fastjson解析

前端ajax提交

$.ajax({
   type: "post",
    url: "/requestByData",
    data:JSON.stringify({
         "cid":"16513211",
         "status":0,
         "data":[
         	{"bank":"工商银行"},
         	{"bank":"中国银行"}
         ]
     }),
    success: function (result) { console.log(result); },
    error: function (error) { console.log(error); }
});

pom.xml配置

<dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>1.2.49</version>
 </dependency>

后台控制器接收

@RequestMapping(value = "/requestByData", method = RequestMethod.POST)
@ResponseBody
public Result<String> requestByData(@RequestBody String data) throws Exception {
    if (data == null) { return "data is null"; }
    System.out.println(data);
    
    JSONObject json = JSONObject.parseObject(data);
    System.out.println(json.get("status"));
    System.out.println(json.getInteger("status"));
    System.out.println(json.get("cid"));
    System.out.println(json.getString("cid"));
    System.out.println(json.get("data"));
    System.out.println(json.getString("data"));

    JSONArray array = json.getJSONArray("data");
    System.out.println(array.get(0));
    System.out.println(array.getString(1));
    
    return data;
}

4. 字符串提交

前端ajax提交

$.ajax({
   type: "post",
    url: "/requestByData",
    data:"hello world",
    success: function (result) { console.log(result); },
    error: function (error) { console.log(error); }
});

后台控制器接收

@RequestMapping(value = "/requestByData", method = RequestMethod.POST)
@ResponseBody
public Result<String> requestByData(@RequestBody String data) throws Exception {
    if (data == null) { return "data is null"; }
    System.out.println(data); 
    
    return "success";
}