静态页面的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包的支持。前端页面写法不变,后端写法为
引用依赖为:
好了,就介绍到这里了,根据自己实际项目需求和个人喜好选择一种方式。
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhgkibeg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13