系列目录
本系列涉及到的源码下载地址：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", "111111"); datastr.append("product.Code", "3333"); datastr.append("product.Name", "4444"); datastr.append("product.user.Name", "555555"); $.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类型可以传输非文本格式文件，可能包含特殊字符，不能简单通过&字符分割内容，所以定义了一个字符串来进行分割。
如果需要上传文件，就必须采用这个方式。