Ajax请求传递参数遇到的问题
WebAPI传递参数遇到的问题
Ajax的格式:
$.ajax({
type: "get", //数据发送的方式(post 或者 get)
url: "/admin/index", //要发送的后台地址
data: { val1: "", val2: "" }, //要发送的数据(参数)格式为{'val1':"1","val2":"2"}
dataType: "json", //后台处理后返回的数据格式
success: function(data) {//ajax请求成功后触发的方法
alert('请求成功');
},
error: function(msg) {//ajax请求失败后触发的方法
alert(msg); //弹出错误信息
}
});
后台实体类(Person):
namespace WebApi.Models
{
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public string EnglishName { get; set; }
}
}
后台接口:
public class TestController : ApiController
{
public Person GetEnglishName(int ID, string Name)
{
Person man = new Person();
man.ID = ID;
man.Name = Name;
man.EnglishName = "Bert";
return man;
}
}
前端Ajax请求:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<title></title>
</head>
<body>
<input type="submit" id="testId" /><input type="text" id="text1" />
</body>
</html> <script type="text/javascript">
$("#testId").click(function() {
$.ajax({
url: "/api/Test/GetEnglishName",
type: "GET",
data: { "ID": 1, "Name": "yzc" },
success: function(data) {
$("#text1").val(data.EnglishName);
}
});
});
</script>
结果:

如上,这是最普通的一次WebApi的Ajax请求,接下来我们来讲几个比较特殊的例子。代码修改如下:黄色荧光笔的都是改动的代码。
后台接口:
public class TestController : ApiController
{
public Person SetEnglishName(int ID, string Name)
{
Person man = new Person();
man.ID = ID;
man.Name = Name;
man.EnglishName = "Bert";
return man;
}
}
前端Ajax请求:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<title></title>
</head>
<body>
<input type="submit" id="testId" /><input type="text" id="text1" />
</body>
</html> <script type="text/javascript">
$("#testId").click(function() {
$.ajax({
url: "/api/Test/SetEnglishName",
type: "GET",
data: { "ID": 1, "Name": "yzc" },
success: function(data) {
$("#text1").val(data.EnglishName);
}
});
});
</script>
结果:

结论:
我们仅仅只是更改了接口的名称而已,从GetEnglishName改为SetEnglishName,为什么就找不到该方法了呢?
原因是:WebAPI对于后台方法接口在没有给它添加访问方式的前提下(如:[HttpPost]),并且方法名称开头带着Get的话,默认是Get请求。
所有在上面例子中,方法名既没有标明请求方式,也不是Get开头,它自然找不到可以允许访问的方法了,建议:不管是什么类型的请求都在方法上设置访问类型。
post请求传递一个参数的时候,data并不是传的键/值对形式,而是data:{"":"yzc"},记住这种特殊情况,不然后台是获取不到前端传过去的值得,至于原因是:Web API 要求请求传递的 [FromBody] 参数,是有一个特定的格式,才能被正确的获取到。
post传递多个参数的时候 (被标记[FromBody]的参数只能出现一次,被标记为[FromUri]的参数可以出现多次,如果被标记为[FromUri]的参数是简单参数,该标记可以去掉。)
请求的时候
1、data:JSON.stringify(x)和contentType: "application/json"一起使用,或者
2、data:{为键值对},并且不能加contentType: "application/json",这两种情况后台[FromBody]参数都能获取到值。(经测试过,当出现交叉情况,如:data里面为键值对,且加了contentType: "application/json",后台将不能访问数据)
当post请求的参数多的时候,就需要封装在一个类里面,这样后台也需要创建临时类来接收,而dynamic可以让我们省掉许多类。然而前端Ajax请求参数的配置目前自己试过的只有data:JSON.stringify(x)和contentType:"application/json"一起后台才能拿到数据。
后台接口:
public class TestController : ApiController
{
[HttpPost]
public Person GetEnglishName(dynamic per)
{
Person man = new Person();
man.ID = per.ID;
man.Name = per.Name;
man.EnglishName = "Bert";
return man;
}
}
前端Ajax请求:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="submit" id="testId" /><input type="text" id="text1" />
</body>
</html> <script type="text/javascript">
$("#testId").click(function() {
$.ajax({
url: "/api/Test/GetEnglishName",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ "ID": , "Name": "yzc" }),
success: function(data) {
$("#text1").val(data.EnglishName);
}
});
});
</script>
结果:

原文:https://www.cnblogs.com/yzcStudy/p/5767109.html
Ajax请求传递参数遇到的问题的更多相关文章
- WebAPI学习日记一:Ajax请求传递参数遇到的问题
首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正.声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的 ...
- ajax请求在参数中添加时间戳
ajax请求在参数中添加时间戳 参考网址
- 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)【转】
开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...
- Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)
本文装载自:http://blog.csdn.net/u012737182/article/details/52831008 感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...
- Ajax请求传递数组参数的方法
方法一:拼接字符串参数 var arr={params:['param','param2']}; $.ajax({url:请求地址, data:arr, type:"POST", ...
- springmvc框架下ajax请求传参数中文乱码解决
springmvc框架下jsp界面通过ajax请求后台数据,传递中文参数到后台显示乱码 解决方法:js代码 运用encodeURI处理两次 /* *掩码处理 */ function maskWord( ...
- 复用$.ajax方式传递参数错误处理
1.封装后的方法,在 data:inData 传递参数的方式和一般不一样,如果不注意会出现错误. function getDataByJsonP(methName, inData, fn) { $.a ...
- Ajax请求的参数
post请求和get请求存放参数位置 post请求和get请求存放参数位置是不同的: post方式参数存放在请求数据包的消息体中. get方式参数存放在请求数据包的请求行的URI字段中,以?开始以pa ...
- Ajax请求传递数组参数
var ids = []; var rows=$("#tt").datagrid("getSelections"); for(var i=0; i<row ...
随机推荐
- 解决方案-Microsoft Visual Studio 2012 已停止工作
问题: 根本解决方案: 用管理员模式运行. 找到软件的安装目录 \Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe 然后如何保存管理员权限运行呢? ...
- 转:php中实现精确设置session过期时间的方法
原文来自于:http://www.jb51.net/article/52309.htm 大多数据情况下我们对于session过期时间使用的是默认设置的时间,而对于一些有特殊要求的情况下我们可以设置一下 ...
- [BZOJ 1833] [ZJOI2010] count 数字计数 【数位DP】
题目链接:BZOJ - 1833 题目分析 数位DP .. 用 f[i][j][k] 表示第 i 位是 j 的 i 位数共有多少个数码 k . 然后差分询问...Get()中注意一下,如果固定了第 i ...
- SharePoint Designer cannot open site error " the server could not complete your request"
3.SPD cannot open site, in the log :Error when open web service: System.InvalidOperationException: A ...
- Unity3d开发IOS游戏 基础
Unity3d开发IOS游戏 基础 @阿龙 - 649998群 1.先说明两个问题,我在WIN7下面的U3D里面,用了雅黑字体,但是导出为ios后,字体就看不见了,这是为什么呢?这是需要在MAC下找 ...
- Zabbix的集中式监控
相对于传统的ZABBIX硬件系统级监控(CPU,内存,硬盘,网卡),应用级的监控就显得有些复杂了. 如果对不同的应该来不同的应用,配置会很多的. 如果我们能在一个指定的AGENT上监控所有的APACH ...
- 一篇故事讲述了计算机网络里的基本概念:网关,DHCP,IP寻址,ARP欺骗,路由,DDOS等...
计算机主机网关的作用是什么? 假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大爷就是你的网关.当你想跟院子里的某个小伙伴玩,只要你在院子里大喊一声 ...
- Leetcode:Repeated DNA Sequences详细题解
题目 All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: " ...
- width:auto; 和 width:100%;的不同
width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...
- C# 精准获取代码运行时间
纯粹转载,转载请注明参考链接及作者! 参考链接:http://www.cnblogs.com/ret00100/archive/2010/08/06/1793680.html,作者:博客园 大佬辉 ...