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

系列目录

循序渐进学.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信息：

?
1
Content-Type: application/json;charset=UTF-8　　

POST的数据：

?
1
{ '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信息：

?
1
Content-Type: application/x-www-form-urlencoded

Post的数据：

?
1
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信息：

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

Post的数据：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
------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类型可以传输非文本格式文件，可能包含特殊字符，不能简单通过&字符分割内容，所以定义了一个字符串来进行分割。

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

posted @   seabluescn  阅读(2099)  评论(3)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae