循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi
系列目录
本系列涉及到的源码下载地址: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类型可以传输非文本格式文件,可能包含特殊字符,不能简单通过&字符分割内容,所以定义了一个字符串来进行分割。
如果需要上传文件,就必须采用这个方式。
签名区:
如果您觉得这篇博客对您有帮助或启发,请点击右侧【推荐】支持,谢谢!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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代理技术深度解析与实战指南