• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
小小鱼34309335
帮助1

首先需要说明一下,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包的支持。前端页面写法不变,后端写法为

学新通

引用依赖为:

学新通 

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

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgkibeg
系列文章
更多 icon
同类精品
更多 icon
继续加载