循序渐进学.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 一.概述 本篇讨论如 ...
随机推荐
- kubernetes 的pod控制器
转载于网络 pod是kubernetes的最小单元,自主式创建的pod删除就没有了,但是通过资源控制器创建的pod如果删除还会重建.pod控制器就是用于实现代替我们去管理pod的中间层,并帮我们确 ...
- os.path.splitext()用法--分离文件名与扩展名
用法: os.path.splitext(“文件路径”) 分离文件名与扩展名:默认返回(fname,fextension)元组,可做分片操作 例子: import os path_01='E:\ ...
- [Java] Servlet工作原理之二：Session与Cookie
(未完成) 一.Cookie与Session的使用简介 1 Cookie Cookie 用于记录用户在一段时间内的行为,它有两个版本:Version 0 和 Version 1,分别对应两种响应头 S ...
- CentOS搭建Vsftpd服务器
转自:http://alca0126.blog.51cto.com/7826974/1754906 一.安装vsftpd服务相关组件 需要安装组件vsftpd pam db4 db4-utils [r ...
- Spring Cloud（十四）Config 配置中心与客户端的使用与详细
前言 在上一篇 文章 中我们直接用了本应在本文中配置的Config Server,对Config也有了一个基本的认识,即 Spring Cloud Config 是一种用来动态获取Git.SVN.本地 ...
- Jenkins mac pkg安装 后默认配置文件/启动路径
自启动文件路径 /Library/LaunchDaemons/org.jenkins-ci.plist jenkins.war 执行文件路径 /Applications/Jenkins/jenkins ...
- A*算法改进——Any-Angle Path Planning的Theta*算法与Lazy Theta*算法
本文是该篇文章的归纳http://aigamedev.com/open/tutorial/lazy-theta-star/#Nash:07 . 传统的A*算法中,寻找出来的路径只能是沿着给出的模型(比 ...
- Nginx报错：upstream timed out (110: Connection timed out)和client intended to send too large body【转】
nginx日志报错 2018/01/26 16:36:49 [error] 23327#0: *54953 upstream timed out (110: Connection timed out) ...
- [转]mitmproxy套件使用攻略及定制化开发
mitmproxy是一款支持HTTP(S)的中间人代理工具.不同于Fiddler2,burpsuite等类似功能工具,mitmproxy可在终端下运行.mitmproxy使用Python开发,是辅助w ...
- .NET C# Tostring format 格式化字符串
一.数值型 formatCode 是可选的格式化代码字符串.必须用“{”和“}”将格式与其他字符分开.如果恰好在格式中也要使用大括号,可以用连续的两个大括号表示一个大括号,即: “{{”或者“}}”. ...