循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi
系列目录
本系列涉及到的源码下载地址：https://github.com/seabluescn/Blog_WebApi
一、概述
前一篇文章重点介绍了Controller的一些知识，本篇重点介绍如何通过HTML端来调用这些后台API。
二、准备工作
1、引入js包
前面介绍过前端的js包，需要通过Bower工具进行管理，这里我们添加三个js的包：
jQuery
jquery-form
bootstrap
2、添加静态文件支持
所有静态页面存放在wwwroot文件夹下面，默认是不能访问的，需要在Configure方法内要增加下面语句：app.UseStaticFiles();
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
//启用Mvc服务
app.UseMvcWithDefaultRoute();
app.UseStaticFiles();
}
三、开工
先建两个实体类
public class Product
{
public string Code { get; set; }
public string Name { get; set; }
public int Numbers { get; set; }
public User user { get; set; }
public Product()
{
user = new User();
}
} public class User
{
public string Name { get; set; }
public int Age { get; set; }
}
1、通过json格式
后台服务代码：
[Produces("application/json")]
[Route("api/products")]
public class ProductsController : Controller
{
[HttpPost]
public string AddProduct(String Code,[FromBody]Product product)
{
Console.WriteLine($"Code :{Code}");
Console.WriteLine($"product code :{product.Code}");
Console.WriteLine($"product name :{product.Name}");
Console.WriteLine($" product.user.Name :{product.user.Name}");
return "success";
}
}
前端调用代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Using Bootstrap</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/jquery-form/dist/jquery.form.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script>
$(document).ready(function () {
$("#add1").click(function (event) {
var datastr = "{ 'Code': '2222', 'Name': '33333','Numbers': 0,'user':{'Name':'username'}}";
$.ajax({
type: "POST",
url: "api/products",
contentType: "application/json;charset=UTF-8",
data: datastr,
success: function (result) {
alert("success");
},
error: function (error) {
alert("出错：" + error.responseText);
}
});
});
});
</script>
</head>
<body>
<div>
<button type="button" class="btn btn-success" id="add1">ADD1</button><br /><br />
</div>
</body>
</html>
其中datastr是一个json字符串。
注意：第一个参数Code是没有办法取到值的，只有FromBody标记的参数才能取到值，Code可以通过URL传过来，或者封装到类里，比如更新product的操作，主键可以通过product.Code获得，而不是单独传过来。
通过Chrome的开发者工具DevTools，我们可以跟踪一下提交的数据信息：
head信息：
Content-Type: application/json;charset=UTF-8
POST的数据：
{ 'Code': '2222', 'Name': '33333','Numbers': 0,'user':{'Name':'username'}}
2、普通表单的提交
服务端代码：
[Produces("application/json")]
[Route("api/products")]
public class ProductsController : Controller
{
[HttpPost]
public string AddProduct(String Code,Product product)
{
Console.WriteLine($"Code :{Code}");
Console.WriteLine($" product code :{product.Code}");
Console.WriteLine($" product name :{product.Name}");
Console.WriteLine($" product.user.Name :{product.user.Name}");
return "success";
}
}
服务端代码和上面基本一样，去掉了FromBody标签。
前端调用代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Using Bootstrap</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/jquery-form/dist/jquery.form.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.js"></script> <script>
$(document).ready(function () {
$("#add3").click(function (event) {
$("#myform").ajaxSubmit();
});
});
</script>
</head>
<body>
<form id="myform" action="api/products" method="post" >
<div>
Code:<input type="text" id="Code" name="Code" /><br />
productCode:<input type="text" id="product.Code" name="product.Code" /><br />
productName:<input type="text" id="product.Name" name="product.Name" /><br />
UserName:<input type="text" id="product.user.Name" name="product.user.Name" /><br />
<input type="submit" value="Submit" /><br /><br />
<button type="button" class="btn btn-success" id="add3">ADD3</button><br /><br />
</div>
</form>
</body>
</html>
add3模拟了一个submit的操作，通过submit‘按钮提交数据或通过ADD3按钮提交数据，其效果一致。
head信息：
Content-Type: application/x-www-form-urlencoded
Post的数据：
Code=111&product.Code=www&product.Name=eeee&product.user.Name=4444
3、二进制格式文本
后台代码和上面一致。
前台代码：
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="utf-8">
<title>Using Bootstrap</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/jquery-form/dist/jquery.form.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.js"></script> <script>
$(document).ready(function () {
$("#add2").click(function (event) { var datastr = new FormData();
datastr.append("Code", "");
datastr.append("product.Code", "");
datastr.append("product.Name", "");
datastr.append("product.user.Name", ""); $.ajax({
type: "POST",
url: "api/products",
contentType: false,
processData: false,
data: datastr,
success: function (result) {
alert(result);
},
error: function (error) {
alert("出错：" + error.responseText);
}
});
});
});
</script>
</head>
<body>
<form id="myform" action="api/products" method="post" >
<div>
Code:<input type="text" id="Code" name="Code" /><br />
productCode:<input type="text" id="product.Code" name="product.Code" /><br />
productName:<input type="text" id="product.Name" name="product.Name" /><br />
UserName:<input type="text" id="product.user.Name" name="product.user.Name" /><br /> <button type="button" class="btn btn-success" id="add2">ADD2</button><br /><br />
</div>
</form>
</body>
</html>
此时前台构建了一个FormData的对象，并进行提交，属性的值应该从表单中进行读取。
有一个更方便的方式可以填充FormData对象：
var formdata = new FormData(document.getElementById("myform"));
实际效果和上面代码一致。
head信息：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywjCGumOsjj4HdEQC
Post的数据：
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="Code"
111111
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="product.Code"
3333
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="product.Name"
4444
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="product.user.Name"
555555
------WebKitFormBoundarywjCGumOsjj4HdEQC--
由于 multipart/form-data类型可以传输非文本格式文件，可能包含特殊字符，不能简单通过&字符分割内容，所以定义了一个字符串来进行分割。
如果需要上传文件，就必须采用这个方式。
循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi的更多相关文章
- 循序渐进学.Net Core Web Api开发系列【0】：序言与目录
一.序言 我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...
- 循序渐进学.Net Core Web Api开发系列【16】：应用安全续-加密与解密
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 应用安全除 ...
- 循序渐进学.Net Core Web Api开发系列【15】：应用安全
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍W ...
- 循序渐进学.Net Core Web Api开发系列【14】：异常处理
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍异 ...
- 循序渐进学.Net Core Web Api开发系列【13】：中间件（Middleware）
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 循序渐进学.Net Core Web Api开发系列【12】：缓存
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 循序渐进学.Net Core Web Api开发系列【11】：依赖注入
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 循序渐进学.Net Core Web Api开发系列【10】：使用日志
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇介 ...
- 循序渐进学.Net Core Web Api开发系列【9】：常用的数据库操作
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇描述一 ...
- 循序渐进学.Net Core Web Api开发系列【8】：访问数据库(基本功能)
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...
随机推荐
- SQL Server深入理解“锁”机制
相比于 SQL Server 2005(比如快照隔离和改进的锁与死锁监视),SQL Server 2008 并没有在锁的行为和特性上做出任何重大改变.SQL Server 2008 引入的一个主要新特 ...
- IIS发布MVC出错
一个MVC网站在发布到IIS上时,出现了这个问题: 然后解决办法: 然后应用程序池那里,自己点右键添加一个 新建完应用池之后选中点高级设置 最后,添加网站,添加网站的时候应用程序池选择自己刚刚新建的那 ...
- CF876 D 树状数组
大意就是放n个硬币,每次放一个计算下这种情况下的操作次数,一个操作为从左到右扫描,如果一个硬币右边是空的,就将硬币后移,否则该次操作停止. 显然发现对于一个情况,我们只要考虑最右边的空位的左侧有几个硬 ...
- mac 无法验证副本
转: 这个是拆机后断了电源,导致时间不对,也就是说现在电脑的时间比U盘制作的时间还早,所以有这样的错误提示. 在终端里面修改时间请参考下面的代码,按回车键确认:date 062614102014.30 ...
- python技巧 使用值来排序一个字典
In [8]: a={'x':11,'y':22,'c':4} In [9]: import operator In [10]: sorted(a.items(),key=operator.itemg ...
- 第8月第19天 django rest
1. def retrieve(self, request, pk=None): try: book = Book.objects.get(book_id=pk) except Book.DoesNo ...
- gitminer
https://github.com/UnkL4b/GitMiner + Autor: UnK + Blog: https://unkl4b.github.io + Github: https://g ...
- Linux常见问题总结【转】
作为一名合格的 Linux 运维工程师,一定要有一套清晰.明确的解决故障思路,当问题出现时,才能迅速定位.解决问题,这里给出一个处理问题的一般思路: 重视报错提示信息:每个错误的出现,都是给出错误提示 ...
- PyCharm 2018实现远程调试代码
pycharm是一个非常强大的python开发工具,现在很多代码最终在线上跑的环境都是linux,而开发环境可能还是windows下开发,这就需要经常在linux上进行调试,或者在linux对代码进行 ...
- JVM(3)对象A和B循环引用，最后会不会不被GC回收？-------关于Java的GC机制
①首先说一下,GC里边在JVM其中是使用的ROOT算法,ROOT算法,什么称作为ROOT呢,就是说类的静态成员,静态成员就是static修饰的那种,是"根"的一个,根还包含方法中的 ...