前后端联调之Form Data与Request Payload

描述

在beego框架中，用this.input()，没有获取到表单参数，对比发现，从chrome-dev-tools（F12调试器）中看到的FormData与RequestBody了。Request Payload无法获取到，FormData可以获取到。建议先读前后端联调之Form Data与Request Payload，你真的了解吗？这篇文章（有点懒，不想搬），理解上面问题原因。

对比代码

form Data的代码

var url = '/xxxx/update'
var requestBody = $('body').find("#form-{{.RandomId}}").serializeArray();
console.log(requestBody)
/*
(3) [{…}, {…}, {…}]
0: {name: "Period", value: "1"}
1: {name: "Time", value: ""}
2: {name: "Range", value: "LastWholeWeek"}
length: 3
__proto__: Array(0)*/
$.ajax({
    type: 'POST',
    datatype: 'json',
    url: url,
    data: requestBody,
    success: function (json) {
        BJUI.dialog('closeCurrent', 'datagrid-dialog-edit')
        BJUI.navtab('refresh')
    },
    error: BJUI.ajaxError
})

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

form data： Period=2&Time=&Range=LastWholeWeek

Request Payload的代码

代码一：

var url = '/xxxx/update'
var requestBody = $('body').find("#form-{{.RandomId}}").serializeArray();
console.log(requestBody)
/*
(3) [{…}, {…}, {…}]
0: {name: "Period", value: "1"}
1: {name: "Time", value: ""}
2: {name: "Range", value: "LastWholeWeek"}
length: 3
__proto__: Array(0)*/
$.ajax({
    type: 'POST',
    datatype: 'json',
    url: url,
    data: requestBody,
    Content-Type: "application/json;charset=UTF-8"，
    success: function (json) {
        BJUI.dialog('closeCurrent', 'datagrid-dialog-edit')
        BJUI.navtab('refresh')
    },
    error: BJUI.ajaxError
})

Content-Type: application/json;charset=UTF-8
Request Payload： Period=2&Time=&Range=LastWholeWeek

代码2：

var url = '/xxxx/update'
var requestBody = $('body').find("#form-{{.RandomId}}").serializeJson();
console.log(requestBody)
/*
{Period: "1", Time: "", Range: "LastWholeWeek"}
Range: "LastWholeWeek"
Period: "1"
Time: ""
__proto__: Object*/
$.ajax({
    type: 'POST',
    datatype: 'json',
    url: url,
    data: JSON.stringify(requestBody),
    Content-Type: "application/json;charset=UTF-8"，
    success: function (json) {
        BJUI.dialog('closeCurrent', 'datagrid-dialog-edit')
        BJUI.navtab('refresh')
    },
    error: BJUI.ajaxError
})

Content-Type: application/json;charset=UTF-8
Request Payload： {Period: "1", Time: "", Range: "LastWholeWeek"}

结论

数据发送

Content-Type，结合实际需求设置。否则无法正确获取数据。

数据获取

正如上面文章说的，不管哪种形式，上面的数据都在http请求的消息体中。在beego框架中，request payload的数据的确获取到了（在requestbody中），但是无法通过已有的接口按照表单获取出来，待研究。

参考文章

• 前后端联调之Form Data与Request Payload，你真的了解吗？