系列目錄
本系列涉及到的源碼下載地址：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類型可以傳輸非文本格式文件，可能包含特殊字符，不能簡單通過&字符分割內容，所以定義了一個字符串來進行分割。
如果需要上傳文件，就必須采用這個方式。