系列目录

循序渐进学.Net Core Web Api开发系列目录

本系列涉及到的源码下载地址: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的更多相关文章

  1. 循序渐进学.Net Core Web Api开发系列【0】:序言与目录

    一.序言 我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...

  2. 循序渐进学.Net Core Web Api开发系列【16】:应用安全续-加密与解密

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 应用安全除 ...

  3. 循序渐进学.Net Core Web Api开发系列【15】:应用安全

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍W ...

  4. 循序渐进学.Net Core Web Api开发系列【14】:异常处理

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍异 ...

  5. 循序渐进学.Net Core Web Api开发系列【13】:中间件(Middleware)

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...

  6. 循序渐进学.Net Core Web Api开发系列【12】:缓存

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...

  7. 循序渐进学.Net Core Web Api开发系列【11】:依赖注入

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...

  8. 循序渐进学.Net Core Web Api开发系列【10】:使用日志

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇介 ...

  9. 循序渐进学.Net Core Web Api开发系列【9】:常用的数据库操作

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇描述一 ...

  10. 循序渐进学.Net Core Web Api开发系列【8】:访问数据库(基本功能)

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...

随机推荐

  1. sqoop的安装与配置

    最近需要将MySQL的数据导出到HDFS,所以搜到了sqoop2.跟sqoop1相比,sqoop2的好处是直接使用程序连接到集群上的sqoop,远程操作.流程是需要先创建link也可以理解成要操作的对 ...

  2. Java基础-SSM之mybatis一对一关联

    Java基础-SSM之mybatis一对一关联 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.准备测试环境(创建数据库表)  1>.创建husbands和wifes表并建 ...

  3. bzoj千题计划283:bzoj4516: [Sdoi2016]生成魔咒(后缀数组)

    http://www.lydsy.com/JudgeOnline/problem.php?id=4516 考虑在后面新加一个字母产生的影响 假设是第i个 如果不考虑重复,那么会增加i个不同的字符串 考 ...

  4. Nginx配置项优化(转载)

    (1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...

  5. Django Book学习笔记(下)

    Django的Session框架 对于Django加密,大致使用这样的格式: hashtype$salt$hash 原因? 一次哈希是一次单向的加密过程,你能容易地计算出一个给定值的哈希码,但是几乎不 ...

  6. spring Mvc 执行原理 及 xml注解配置说明 (六)

    Spring MVC 执行原理 在 Spring Mvc 访问过程里,每个请求都首先经过 许多的过滤器,经 DispatcherServlet 处理; 一个Spring MVC工程里,可以配置多个的 ...

  7. CSS-3 box-shadow 的使用

    box-shadow是给对象实现图层阴影效果的. 语法: E {box-shadow: <length> <length> <length>?<length& ...

  8. nodejs图片总结

    今天终于把朴灵老师写的<深入浅出Node.js>给学习完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内在 ...

  9. UVALive 6467 Strahler Order

    > 题目链接 题意:给定一个有向图,顶点代表水池,入度为零的定点代表水源,等级是1,他们延河道(有向边)冲撞,对于普通的水池来说,题目给定判断它等级的两个准则,问出度为零的那个点的等级是多少. ...

  10. HDU 1241 Oil Deposits DFS搜索题

    题目大意:给你一个m*n的矩阵,里面有两种符号,一种是 @ 表示这个位置有油田,另一种是 * 表示这个位置没有油田,现在规定相邻的任意块油田只算一块油田,这里的相邻包括上下左右以及斜的的四个方向相邻的 ...