循序渐进学.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 一.概述 本篇讨论如 ...
随机推荐
- Python中的ujson模块
听说ujson比json模块快了很多,特来一试: # -*- coding: utf-8 -*- import json import ujson import time def cost_time( ...
- Zabbix应用八:Zabbix监控MongoDB
利用Zabbix监控MongoDB 一.首先介绍mongodb采集到的数据含义: 1.状态采集命令: >db.serverStatus(); 2.输出内容: { "host" ...
- Swift学习笔记2
1.函数参数都有一个外部参数名(external parameter name)和一个局部参数名(local parameter name).外部参数名用于在函数调用时标注传递给函数的参数,局部参数名 ...
- Oozie 生成JMS消息并向 JMS Provider发送消息过程分析
一,涉及到的工程 从官网下载源码,mvn 编译成 Eclipse工程文件:
- 20155224 2016-2017-2 《Java程序设计》第6周学习总结
20155224 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Thread线程: 定义某线程后,要有 xxx.stard(); Thread.sleep( ...
- 【转】教你何时开启水果机上的HDR拍照
原址:http://news.mydrivers.com/1/175/175922.htm 苹果在iOS 4.1操作系统中为iPhone 4增加了一项有趣的新功能:HDR拍照.虽然目前市场上支持HDR ...
- shell 判断路径
判断路径 ];then echo "找到了123" if [ -d /root/Desktop/text ] then echo "找到了text" else ...
- [BZOJ 2257][JSOI2009]瓶子和燃料 题解（GCD）
[BZOJ 2257][JSOI2009]瓶子和燃料 Description jyy就一直想着尽快回地球,可惜他飞船的燃料不够了. 有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子 ...
- HDU 1875 畅通工程再续 最小生成树问题
题目描述:输入一个T,表示有T组测试数据,然后每组测试数据有一个C,表示在一个湖里面有C座岛屿,现在要在岛屿之间修建桥,可以修建必须满足的条件是岛与岛之间的距离在10到1000的范围内,然后给出每座岛 ...
- JS种this的四种用法
记住以下四点: 1.没调用对象就指向全局对象 2.有对象就指向调用对象 3.用new构造就指向新对象 4.通过 apply 或 call 或 bind 来改变 this 的所指. 1.测试一:没调用对 ...