JavaScript 调用 WebApi 参数传递场景分析

2017-07-27 本文已影响218人过桥

起因

近期使用WebApi过程中总遇到各种参数传递问题，特此总结复习
以下服务示例均为Web Api 2

场景一 Get

服务示例

        // GET: api/TestWebApi
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET: api/TestWebApi/5
        public string Get(string id)
        {
            return "value";
        }

调用示例

<script>
        $.ajax({
            url: "http://localhost:14884/api/TestWebApi",
            type: "get",
            data: {
                //"id": 5,
                "code": "1",  //无法获取
                "value": "hello" //无法获取
            },
            success: function (data) {
                console.log(data);
            }
        });
    </script>

小结
若调用中参数未匹配（本例中为注释id），则执行无参方法，输出为(2) ["value1", "value2"]
若调用中参数匹配，则执行有参方法，输出为value

场景二 Post

服务示例

        public class DataModel
        {
            public string code { get; set; }
            public string value { get; set; }
        }

        // POST: api/TestWebApi
        public string Post([FromBody]DataModel dm)
        {
            return "Api捕获参数：" + dm.code + "_" + dm.value;
        }

调用示例

    <script>
        $.ajax({
            url: "http://localhost:14884/api/TestWebApi",
            type: "post",
            data: {
                "id": 5,  //无法获取
                "code": "1",   //可以获取
                "value": "hello"   //可以获取
            },
            success: function (data) {
                console.log(data);
            }
        });
    </script>

Post 参数正常获取
小结
Post提交时，常用实体搭配使用，注意保持参数前后台一致即可正常解析

场景三 Post List数组

服务示例

        public class DataModel
        {
            public string code { get; set; }
            public string value { get; set; }
        }

        // POST: api/TestWebApi
        public string Post([FromBody]List<DataModel> dm)
        {
            return "Api捕获参数：" + dm[0].code + "_" + dm[0].value;
        }

调用示例

        var temp_data = [{
            "code": "1",
            "value": "hello"
        }, {
            "code": "2",
            "value": "world"
        }];
        $.ajax({
            url: "http://localhost:14884/api/TestWebApi",
            type: "post",
            data: temp_data,
            success: function (data) {
                console.log(data);
            }
        });

List Post 参数无法获取

Request Headers 经观察发送请求，怀疑请求类型问题，后经查找分析测试，调用示例做如下修改即可

修改后调用示例

        var temp_data = [{
            "code": "1",
            "value": "hello"
        }, {
            "code": "2",
            "value": "world"
        }];
        temp_data = JSON.stringify(temp_data);
        $.ajax({
            url: "http://localhost:14884/api/TestWebApi",
            contentType: 'application/json; charset=utf-8',//将json数据以request payload的形式发起请求
            type: "post",
            data: temp_data,
            success: function (data) {
                console.log(data);
            }
        });