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

最新推荐文章于 2021-09-09 17:22:15 发布

weixin_30914981

最新推荐文章于 2021-09-09 17:22:15 发布

阅读量178

点赞数

文章标签： json 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/cang12138/p/5768929.html

版权

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>