web api 初体验之 GET和POST传参
上一篇我们讲到了web api跨域的问题 它几乎是每一个用web api的人都需要去解决的问题,不然都没法测试。接下来会遇到的问题就是传参了。还是用js前台调用服务的方式。
GET 方式
get方式传参 我们一般用于获取数据做条件筛选,也就是 “查”
1.无参
var look = function () {
$.ajax({
type: "GET",
url: "http://172.28.20.106:8002/api/products/",
dataType: "xml",
contentType: 'application/xml;charset=gb2312;'
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
}
2.一个参数
var look = function () {
$.ajax({
type: "GET",
url: "http://172.28.20.106:8002/api/users/",
data:{"id":},
dataType: "xml",
contentType: 'application/xml;charset=gb2312;'
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
}
后台控制器方法如下:
// GET api/users/5
public string Get(int id)
{
return "id:"+id;
}
当然,也可以这样 把参数放在url
var look = function () {
$.ajax({
type: "GET",
url: "http://172.28.20.106:8002/api/users/2",
dataType: "xml",
contentType: 'application/xml;charset=gb2312;'
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
}
输出:<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">id:2</string>
3.多个简单参数
后台方法体如下:
// GET api/users/5
public string Get(int id,string name)
{
return "id:" + id+" name:"+name;
}
多个参数时也比较简单 指明参数就行了
var look = function () {
$.ajax({
type: "GET",
url: "http://172.28.20.106:8002/api/users",
data:{"id":2,"name":"张飞"},
dataType: "json",
contentType: 'application/json;charset=gb2312;'
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
}
输出:"id:1 name:张飞"
4.传递一个对象
后台方法如下:
[Route("Manger")]
public string Get( Product model)
{
return "id:" + model.Id + " name:" + model.Name;
}
大家可能注意到这个方法上面有个标记了,这个其实是自定义路由,针对重载方法,防止出现匹配到多个适配的方法而报错
这里必须要着重说明下,传递对象并不是理所当然的构造一个对象传过去就可以了
var look = function () {
var Product = {
Id: 1,
Name: "张飞",
Category:"212",
Price:22
};
$.ajax({
type: "GET",
url: "http://172.28.20.106:8002/api/users/Manger",
//data:{ "model":{"Id":2,"Name":"张飞","Category":"22","Price":22}},
data: Product ,
dataType: "json",
contentType: 'application/json;charset=gb2312;'
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
}
这2种情况都会报错
经过多次试验发现,后台方法参数列表内加入
[FromUri]关键字就可以了
加入后的方法如下
[Route("Manger")]
public string Get([FromUri] Product model)
{
return "id:" + model.Id + " name:" + model.Name;
} 输出:"id:1 name:张飞"
POST方式
post方式我们一般用来做增 删 改 ,不过在web api中post仅仅用来做增加操作 修改用put 删除用delete
可以看看模板给我们生成的东西
// PUT api/users/5
public string Put(int id, [FromBody]string value)
{
return "id:" + id + "value:" + value;
} // DELETE api/users/5
public void Delete(int id)
{
}
1.post的一个参数
注意:post 提交必须使用
[FromBody]关键字,并且参数列表里面只能有一个关键字,多个无效
// POST api/users
[Route("addid")]
public string Post([FromBody]string value)
{
return "值是:" + value;
}
惯性思维,然后我们的前台会写成这个样子
$.ajax({
type: "POST",
url: "http://172.28.20.106:8002/api/users/addid",
data: {"value":"1"}
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
结果输出却发现 值是:"
后台并没有收到数据
总结:
当只有一个参数时,有2种方式是可以获取到值的
1. data: {"":"1"} //忽略参数名
2. data: "=1" //加上”=“号 并且去掉花括号
$.ajax({
type: "POST",
url: "http://172.28.20.106:8002/api/users/addid",
data: {"":"1"}
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
$.ajax({
type: "POST",
url: "http://172.28.20.106:8002/api/users/addid",
data: "=1"
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
输出:"值是:1"
2.post的多个参数(1个对象)
注意:post并不能提交多个参数,只能合并成对象
错误写法:
public string Post(int id,string name)
{
return "id是:" + id+" name:"+name;
}
public string Post(int id,[FromBody] string name)
{
return "id是:" + id+" name:"+name;
}
正确写法:
[Route("addmodel")]
public string Post([FromBody] Product value)
{
return "值是:" + value.Id+" name :"+value.Name;
}
前台调用:
var Product = {
Id: 1,
Name: "张飞",
Category: "212",
Price: 22 };
$.ajax({
type: "POST",
url: "http://172.28.20.106:8002/api/users/addmodel",
data: Product
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
输出: "值是:1 name :张飞"
3.post的多个参数(多个对象)
如果有多个对象,那就只能把它封装在一个扩展对象里面了
public class User
{
public int ID { get; set; }
public int Name { get; set; }
} public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
} //实体扩展类
public class NewProduct
{
public User user { get; set; }
public Product product { get; set; }
}
接下来就以扩展类为参数,后台代码变成这样
[Route("addnewmodel")]
public string Post([FromBody] NewProduct value)
{
return "userid值是:" + value.user.ID + " priduct值是 :" + value.product.Name;
}
接下来就是前台调用
var Product = {
Id: ,
Name: "手机",
Category: "",
Price: };
var User = {
Id: ,
Name: "张飞",
};
$.ajax({
type: "POST",
url: "http://172.28.20.106:8002/api/users/addnewmodel",
data: { Product: Product ,User:User}
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
输出: "userid值是:1 priduct值是 :手机"
也可以写成这样
$.ajax({
type: "POST",
url: "http://172.28.20.106:8002/api/users/addnewmodel",
data: {
Product: { Id: 1, Name: "手机", Category: "212", Price: 22 }, User: { Id: 1, Name: "张飞", }
}
}).success(function (res) {
console.log(res);
}).error(function (xhr, status) {
console.log(xhr);
});
自定义路由
额外的提一下,由于我代码中大量用到它,还是介绍一下
使用场景:用于方法重载 忽略方法名 自定义url(更好看点) 使用步骤:
1.在控制器类上方加入一个标记
[RoutePrefix("api/users")]
public class UsersController : ApiController
{
}
里面的内容可以根据自己的喜好来定义
2.在方法中加入路由标记[Route("Manger")]
[Route("Manger")]
public string Get([FromUri] Product model)
{
return "id:" + model.Id + " name:" + model.Name+" price:"+model.Price;
}
这样再访问时就可以使用
api/users/Manger
注意:如果想实现第2步,必须先实现第一步,不然会报错
总结
传参的方式估计不只这几种,目前只用到了这些。后续如果继续深入学习 也会分享给大家。如果有理解错误的地方,欢迎指正。避免误人子弟! 如果觉得有收获,请关注 推荐 http://www.cnblogs.com/jingch个人主页
web api 初体验之 GET和POST传参的更多相关文章
- web api 初体验 解决js调用跨域问题
跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user http:IP:8002/api/user 不同IP不同端口: http://172.28.20.100:8 ...
- Web API初印象
理解REST,RESTful和Web API 1.REST:Representational State Transfer表征状态转移,是Roy Fielding博士在2000年他的博士论文中提出来的 ...
- 阿里云部署Java web项目初体验(转)/linux 上配置jdk和安装tomcat
摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在阿里云上部署Java web项目. 一.准备工作 购买了阿里云的云解析,和云服务器ecs. 2.下载put ...
- Hbase王国游记之:Hbase客户端API初体验
§历史回顾 2018年岁末,李大胖朦胧中上了开往Hbase王国的车,伴着一声长鸣,列出缓缓驶出站台,奔向无垠的广袤. (图片来自于网络) 如不熟悉剧情的,可观看文章: 五分钟轻松了解Hbase列式存储 ...
- mono上部署web程序初体验
早就想体验一下mono,但一直琐事缠身.难得有时间,便在网上一通狂搜mono相关的资料. 如果想使用Apache服务器,只能使用mod_mono的方式,这里有详细的介绍.这种方式有点繁琐,需要安装一大 ...
- 阿里云部署Java web项目初体验(转)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在 ...
- Python+Django(Python Web项目初体验)
参考:https://blog.csdn.net/qq_34081993/article/details/79229784 Django是一个开放源代码的Web应用框架,由Python写成. 安装Dj ...
- Kong Api 初体验
请查看原文: https://www.fangzhipeng.com/nginx/kong/2016/07/11/kong-api-gateway/ Kong是一个可扩展的开源API层(也称为API网 ...
- 阿里云部署Java web项目初体验
林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了怎样在阿里云上安装JDK.Tomcat以及其配置过程. 最后以一个实例来演 ...
随机推荐
- opencv用imread( argv[1], 1)读取图片
显示一幅图:主要是运用功能:imread namedWindow imshowimread:从字面意思我们就可以看懂,用来读取图片的:namedWindow:显然,我们也可以看到这是用来命名窗口名称的 ...
- Sql 获取向上取整、向下取整、四舍五入取整的实例
[四舍五入取整截取] select round(54.56,0) [向下取整截取] SELECT FLOOR(54.56) [向上取整截取] SELECT CEILING(13.15) --MS ...
- js解决IE8、9下placeholder的兼容问题
由于placeholder是html5的新属性,在IE8.IE9下是不能显示的,有兼容性问题. 解决思路: 1.判断目前浏览器是否支持placeholder属性 2.若不支持,则将type=" ...
- 使用git删除远程仓库文件
git rm -r -f --cached 文件或文件夹 git commit -m "移除文件或文件夹" git push origin master 注意:要删除的文件或文件夹 ...
- React Native + Nodejs 使用RSA加密登录
想用rn做个RSA(非对称加密)登录 基本流程就是在服务端生成RSA后,将“公钥”发到客户端,然后客户端用“公钥”加密信息发送到服务端,服务务端用私钥解密. 过程不复杂,问题在于,nodejs和rn都 ...
- 当在浏览器输入一个url访问后发生了什么
首先根据DNS获取该url的ip地址,ip地址的获取可能通过本地缓存,路由缓存等得到. 然后在网络层通过路由选择查找一条可达路径,最后利用tcp/ip协议来进行数据的传输. 其中在传输层将信息添加源端 ...
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
- java数据结构_笔记(4)_图
图一.概念.图: 是一种复杂的非线性数据结构.图的二元组定义: 图 G 由两个集合 V 和 E 组成,记为:G=(V, E) 其中: V 是顶点的有穷非空集合,E 是 V 中顶点偶对(称为边)的有穷 ...
- js对象的深度克隆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js控制select下拉列表数据绑定
JS代码部分: <script type="text/javascript"> $(document).ready(function () { $("sel ...