美文网首页程序员
JavaScript 调用 WebApi 参数传递场景分析

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

作者: 过桥 | 来源:发表于2017-07-27 15:13 被阅读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);
            }
        });
Post List参数获取

场景三 部署后 405 异常补充说明

将场景三Web Api代码部署后,发现页面调用会出现 405
异常

405 异常
通过检索排除等方式,判断IIS设置问题,移除使用Web Api自动生成Web.confighandlersremove OPTIONSVerbHandler即可 处理程序映射 Web.config

参考
ASP.NET Web API(一):使用初探,GET和POST数据
WebApi后端的List<String>前端如何发送?
aspnet webapi 跨域请求 405错误

相关文章

网友评论

    本文标题:JavaScript 调用 WebApi 参数传递场景分析

    本文链接:https://www.haomeiwen.com/subject/bdlzkxtx.html