Ajax请求传递参数遇到的问题
WebAPI传递参数遇到的问题
Ajax的格式：
$.ajax({
type: "get", //数据发送的⽅式（post 或者 get）
url: "/admin/index", //要发送的后台地址
data: { val1: "1", val2: "2" }, //要发送的数据（参数）格式为{'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>发送ajax请求的步骤
</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
{
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": 1, "Name": "yzc" }),
success: function(data) {
$("#text1").val(data.EnglishName);
}
});
});
</script>
结果：