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> </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": 1, "Name": "yzc" }), success: function(data) { $("#text1").val(data.EnglishName); } }); }); </script>
结果：
