循序漸進學.Net Core Web Api開發系列【4】:前端訪問WebApi

seabluescn發表於2018-06-26

系列目錄

循序漸進學.Net Core Web Api開發系列目錄

 本系列涉及到的原始碼下載地址: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型別可以傳輸非文字格式檔案,可能包含特殊字元,不能簡單通過&字元分割內容,所以定義了一個字串來進行分割。

 如果需要上傳檔案,就必須採用這個方式。

相關文章