基于静态页面的ajax方式发送post请求，多参数传递到.net core 5.0 webapi的实现

首先需要说明一下，asp.net webapi和asp.net core webapi在实现静态页面mvc项目时，在多参数传递方面还是存在较大差距的。本文主要讲解静态页面发送ajax，多个参数到asp.net core5.0 webapi的实现

首先上静态前端页面，以下是html部分

<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>LayuiMini后台登录</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="username" lay-verify="required"  placeholder="请输入登录账号" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" lay-verify="required"  placeholder="请输入密码" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>
            </div>
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
            </div>
        </form>
    </div>
</div>

以下是核心ajax发送部分，

$.ajax({
    //请求类型
    type:"post",
    url:api+"Login/LoginIn",
    contentType: "application/json;charset=UTF-8",
    data:JSON.stringify({"uname":data.username,"pwd":data.password}),
    dataType:"json",
    success:function (result) {
        console.log("result",result);
        layer.msg('登录成功', function () {
            window.location = '../index.html';
        });
    }
});

下面，我将讲解集中net core后端接收多参数的方式，且已经全部运行通过

前端使用jquery，layui，未使用js框架，前端开发使用webstorm2018，后端采用vs2019。net core版本5.0

需要在Startup.cs中添加对静态页面的支持

 

方式一：定义一个对象接收，该方式每次接受一种数据类型，都需要定义一个对象，虽然写法简单，但是我觉得不太好用。

 

方式二，dynamic Json方式

需要下载包，如下图所示

由于我的.net core是5.0的，因此下载对应的5.0.16版本即可。在Startup.cs中添加对该json包的支持。

前端页面写法都是一样，后端写法为：

 

添加的引用为：

 

方式三，JObject方式

需要参考方式二，添加对json包引用依赖支持， 并在Startup.cs中添加对该json包的支持。前端页面写法不变，后端写法为

引用依赖为：

 

好了，就介绍到这里了，根据自己实际项目需求和个人喜好选择一种方式。