.net core 后台接收 ajax/接口請求 參數

1 接收表單參數

(1)后台代碼

        [HttpPost]
        public IActionResult FormParas([FromForm]string para1, [FromForm] string para2)
        {
            return Json(new { code = 0, msg = $"接收到的參數 para1:{para1},para2:{para2}" });
        }

(2) ajax請求代碼

    $.ajax({
        type: 'post',
        url: '/Test/FormParas',
        data: { para1: 'p1', para2: 'p2' },
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'json',// 響應類型
        success: function (res) {
            console.log(res);
        },
        error: function () {
            alert('程序出錯');
        },
        beforeSend: function () {
            // 加載loading框
        },
        complete: function () {
            // 關閉loading框
        }
    });

(3) 使用postman請求

后端加上ValidateAntiForgeryToken示例

(1) 后台代碼

        // 接收表單參數
        [ValidateAntiForgeryToken]
        [HttpPost]
        public string FromParas2(string id, _0710Model model)
        {
            if(string.IsNullOrEmpty(id) || model == null)
            {
                return "參數非法";
            }
            return "OK";
        }

實體代碼如下：

    public class _0710Model
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<_0710Model> list1 { get; set; }
        public List<_0710Model> list2 { get; set; }
    }

(2) 前端請求代碼

html 部分

<div>
    <!--這段代碼會生成如下元素
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Iq1FkUsGUVDjXSXvr3mD_aBj_NbQuayfjr5Kp-DB_wgGvNNqR8aedZeHMIEcgfwSV4xqNxYjvxRlu_QX4oF2jXpSLlJ-m50T02iUPBeUKD6o7A1pV9VW68z6A7iPw_zYaCXmDqKCL4GTLIoheZD29E" />
    -->
    @Html.AntiForgeryToken()
</div>

js 部分

    $.ajax({
        type: 'post',
        url: '/Test/FromParas2',
        contentType: 'application/x-www-form-urlencoded',
        data: {
            __RequestVerificationToken: $('[name=__RequestVerificationToken]').val(),
            id: '測試id', model: { Id: 'modelId', Name: 'modelName', list1: [{ Id: 'modelId1', Name: 'modelName1' }], list2: [{ Id: 'modelId2', Name: 'modelName2' }] }
        },
        dataType: 'text',
        success: function (res) {
            alert(res);
        }
    });

（3） 前端調試查看請求如下

 

 (4) 使用postman調用,，先要注釋掉后台的 ValidateAntiforgeryToken

 

 可以看到，和前端調試看到的請求參數一樣的就行。

 2 frombody 接收參數

（1）后台代碼

        public IActionResult FromBody([FromBody]RequestModel requestModel)
        {
            requestModel.CreateTime = requestModel.CreateTime.Value.AddHours(8);
            return Json(new { code = 0 ,msg="操作成功1"});
        }

（2）ajax請求代碼

    $.ajax({
        type: 'post',
        url: '/Test/FromBody',
        data: JSON.stringify({ Id: 1, name: 'name1', money: 10.21, CreateTime: new Date('2021-05-29 16:53:10')}),
        contentType: 'application/json',
        dataType: 'json', // 后台響應類型
        success: function (res) {
        },
        error: function () {
            alert('程序出錯');
        },
        beforeSend: function () {
            // 加載loading框
        },
        complete: function () {
            // 結束loading框
        }
    });

（3）postman請求

 

 3  接收list

（1）后台代碼

        public IActionResult AcceptList([FromForm]string reqId, [FromForm] List<RequestModel> requestModel)
        {
            return Json(new { code = 0, msg = "操作成功2" });
        }

（2）ajax代碼

    $.ajax({
        type: 'post',
        url: '/Test/AcceptList',
        data: { reqId: 'id', requestModel: [{ Id: 2, name: 'id2', money: 22, CreateTime: new Date('2021-05-29 22:53:10') }, { Id: 1, name: 'id1', money: 11, CreateTime: new Date('2021-05-29 12:53:10') }] },
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'json',
        success: function (res) {
            if (res.code == 0)
                alert(res.msg);
        },
        error: function () {
        },
        beforeSend: function () {
        },
        complete: function () {
        }
    });

（3）postman請求

 

 (4)后台請求實體如下

 

 

參考資源：

https://www.cnblogs.com/linJie1930906722/p/12505618.html

 

注：后台是 .net core 5.0 項目類型為 asp.net core mvc