循序漸進學.Net Core Web Api開發系列【4】：前端訪問WebApi
阿新 • • 發佈：2018-12-29
系列目錄
一、概述
前一篇文章重點介紹了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型別可以傳輸非文字格式檔案，可能包含特殊字元，不能簡單通過&字元分割內容，所以定義了一個字串來進行分割。
如果需要上傳檔案，就必須採用這個方式。