循序渐进学.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信息：
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", "");
datastr.append("product.Code", "");
datastr.append("product.Name", "");
datastr.append("product.user.Name", ""); $.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类型可以传输非文本格式文件，可能包含特殊字符，不能简单通过&字符分割内容，所以定义了一个字符串来进行分割。
如果需要上传文件，就必须采用这个方式。
循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi的更多相关文章
- 循序渐进学.Net Core Web Api开发系列【0】：序言与目录
一.序言 我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...
- 循序渐进学.Net Core Web Api开发系列【16】：应用安全续-加密与解密
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 应用安全除 ...
- 循序渐进学.Net Core Web Api开发系列【15】：应用安全
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍W ...
- 循序渐进学.Net Core Web Api开发系列【14】：异常处理
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍异 ...
- 循序渐进学.Net Core Web Api开发系列【13】：中间件（Middleware）
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 循序渐进学.Net Core Web Api开发系列【12】：缓存
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 循序渐进学.Net Core Web Api开发系列【11】：依赖注入
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 循序渐进学.Net Core Web Api开发系列【10】：使用日志
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇介 ...
- 循序渐进学.Net Core Web Api开发系列【9】：常用的数据库操作
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇描述一 ...
- 循序渐进学.Net Core Web Api开发系列【8】：访问数据库(基本功能)
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...
随机推荐
- webGL和three.js的关系
如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用.你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上创建各种交互组件.现在这个功能集合里又有了一个新成员 ...
- bzoj千题计划196：bzoj4826: [Hnoi2017]影魔
http://www.lydsy.com/JudgeOnline/problem.php?id=4826 吐槽一下bzoj这道题的排版是真丑... 我还是粘洛谷的题面吧... 提供p1的攻击力:i,j ...
- BAT及各大互联网公司2014前端笔试面试题--JavaScript篇（昨天某个群友表示写的简单了点，然后我无情的把他的抄了一遍）
(某个群友)http://www.cnblogs.com/coco1s/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大 ...
- F - Friends ZOJ - 3710（暴力）
题目链接:https://cn.vjudge.net/contest/280949#problem/F 题目大意:给你n个人,然后给你m个关系,每个关系输入t1, t2 .代表t1和t2是朋友关系(双 ...
- cmd命令，bat脚本
1.cd /d D:\>cd mysql D:\mysql>cd /d C:/TEMP C:\Temp>cd /? 显示当前目录名或改变当前目录. CHDIR [/D] [drive ...
- select & input的disabled属性及其向后台传值问题
1.select & input disabled属性 select & input 均具有disabled属性,设置该属性可禁止修改select / input 的文本内容,同时也会 ...
- Java反射--基于ParameterizedType实现泛型类，参数化类型
一.引子: 项目中使用Gson的反序列化将json转化成具体的对象,具体方法是: package com.google.gson;下的反序列化方法 public <T> T fromJso ...
- linux sftp安装【转】
工具:虚拟机:VMware Workstation Pro.操作系统:CentOS-6.4-x86_64-minimal.终端模拟器:Xshell 5 .ftp:filezilla 一.让虚拟机联网 ...
- phantomjs waitFor
function waitFor(testFx, onReady, timeOutMillis) { var maxtimeOutMillis = timeOutMillis ? timeOutMil ...
- nor flash 和 nand flash
NOR Flash是很常见的一种存储芯片,数据掉电不会丢失,支持Execut On Chip,即程序可以直接在FLASH片内执行(这意味着存储在NOR FLash上的程序不需要复制到RAM就可以直接运 ...