Ajax请求传递参数遇到的问题

时间:2021-07-01 15:45:52

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>

结果:

Ajax请求传递参数遇到的问题

如上,这是最普通的一次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>

结果:

Ajax请求传递参数遇到的问题

结论:

我们仅仅只是更改了接口的名称而已,从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>

结果:

Ajax请求传递参数遇到的问题


原文:https://www.cnblogs.com/yzcStudy/p/5767109.html