循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi-白红宇

循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi

阅读量：5114 次

发布时间：2019-06-13

本文共 4279 字，大约阅读时间需要 14 分钟。

原文:

系列目录

本系列涉及到的源码下载地址：

一、概述

前一篇文章重点介绍了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";        }      }

前端调用代码：

    
            Using Bootstrap

其中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标签。

前端调用代码：

    
            Using Bootstrap    
                                 
                
         
                      Code:
          
          
            productCode:
          
          
            productName:
          
          
            UserName:

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、二进制格式文本

后台代码和上面一致。

前台代码：

    
            Using Bootstrap    
                                 
                
         
                      Code:
          
          
            productCode:
          
          
            productName:
          
          
            UserName:

此时前台构建了一个FormData的对象，并进行提交，属性的值应该从表单中进行读取。

有一个更方便的方式可以填充FormData对象：

var formdata = new FormData(document.getElementById("myform"));

实际效果和上面代码一致。

head信息：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywjCGumOsjj4HdEQC

Post的数据：

------WebKitFormBoundarywjCGumOsjj4HdEQCContent-Disposition: form-data; name="Code"111111------WebKitFormBoundarywjCGumOsjj4HdEQCContent-Disposition: form-data; name="product.Code"3333------WebKitFormBoundarywjCGumOsjj4HdEQCContent-Disposition: form-data; name="product.Name"4444------WebKitFormBoundarywjCGumOsjj4HdEQCContent-Disposition: form-data; name="product.user.Name"555555------WebKitFormBoundarywjCGumOsjj4HdEQC--

由于 multipart/form-data类型可以传输非文本格式文件，可能包含特殊字符，不能简单通过&字符分割内容，所以定义了一个字符串来进行分割。

如果需要上传文件，就必须采用这个方式。