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

2018/06/26 19:23
阅读数 6

系列目录

循序渐进学.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类型可以传输非文本格式文件,可能包含特殊字符,不能简单通过&字符分割内容,所以定义了一个字符串来进行分割。

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部