按部就班學.Net Core Web Api開發系列【4】：前端訪問WebApi

時間 2019-11-08

標籤按部就班 core web api 開發系列前端訪問 webapi 欄目 HTML 简体版

原文原文鏈接

系列目錄css

按部就班學.Net Core Web Api開發系列目錄html

本系列涉及到的源碼下載地址：https://github.com/seabluescn/Blog_WebApi前端

1、概述jquery

前一篇文章重點介紹了Controller的一些知識，本篇重點介紹如何經過HTML端來調用這些後臺API。git

2、準備工做github

一、引入js包ajax

前面介紹過前端的js包，須要經過Bower工具進行管理，這裏咱們添加三個js的包：json

jQuerybootstrap

jquery-formapi

bootstrap

二、添加靜態文件支持

全部靜態頁面存放在wwwroot文件夾下面，默認是不能訪問的，須要在Configure方法內要增長下面語句：app.UseStaticFiles();

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {   
            //啓用Mvc服務
            app.UseMvcWithDefaultRoute();  
            app.UseStaticFiles();
        }

3、開工

先建兩個實體類

    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; }
    }

一、經過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'}}

二、普通表單的提交

服務端代碼：

    [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

三、二進制格式文本

後臺代碼和上面一致。

前臺代碼：

<!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類型能夠傳輸非文本格式文件，可能包含特殊字符，不能簡單經過&字符分割內容，因此定義了一個字符串來進行分割。

若是須要上傳文件，就必須採用這個方式。