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>

结果：

如上，这是最普通的一次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": , "Name": "yzc" }),

            success: function(data) {

                $("#text1").val(data.EnglishName);

            }

        });

    });

</script>

结果：

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

Ajax请求传递参数遇到的问题的更多相关文章

  1. WebAPI学习日记一：Ajax请求传递参数遇到的问题

    首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正.声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的 ...

  2. ajax请求在参数中添加时间戳

    ajax请求在参数中添加时间戳 参考网址

  3. 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）【转】

    开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...

  4. Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）

    本文装载自:http://blog.csdn.net/u012737182/article/details/52831008    感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...

  5. Ajax请求传递数组参数的方法

    方法一:拼接字符串参数 var arr={params:['param','param2']}; $.ajax({url:请求地址, data:arr, type:"POST", ...

  6. springmvc框架下ajax请求传参数中文乱码解决

    springmvc框架下jsp界面通过ajax请求后台数据,传递中文参数到后台显示乱码 解决方法:js代码 运用encodeURI处理两次 /* *掩码处理 */ function maskWord( ...

  7. 复用$.ajax方式传递参数错误处理

    1.封装后的方法,在 data:inData 传递参数的方式和一般不一样,如果不注意会出现错误. function getDataByJsonP(methName, inData, fn) { $.a ...

  8. Ajax请求的参数

    post请求和get请求存放参数位置 post请求和get请求存放参数位置是不同的: post方式参数存放在请求数据包的消息体中. get方式参数存放在请求数据包的请求行的URI字段中,以?开始以pa ...

  9. Ajax请求传递数组参数

    var ids = []; var rows=$("#tt").datagrid("getSelections"); for(var i=0; i<row ...

随机推荐

  1. 用C++进行函数式编程

    http://www.programmer.com.cn/12717/   文 / John Carmack 译 / 王江平 <Quake>作者Carmack认为追求函数式的程序设计有着实 ...

  2. c++:参数型别的推导

    STL源码剖析--侯捷 总结 尽管现在的很多语言支持参数类型的判别,但是c/c++并不支持这一特性. 但是我们可以通过一些技巧使得c++具有自动判别参数类型的特性. 模板 我们都知道在模板类和模板函数 ...

  3. Javascript Framework Scenario

    Mobile----- zepto, jQuery Scroll------ iscrollhttp://cubiq.org/iscroll-4 jo.js widget----- jquery pl ...

  4. ubuntu 查本机 ip地址的命令是什么， 详细信息的？

    使用ifconfig命令即可.你一敲进去都出来了

  5. JSP页面的异常处理<转>

     对于jsp页面错误处理这里大致有两种方式:一.在Web.xml中配置全局的错误异常处理    即凡是该项目下(即虚拟路径下的所有文件)的任意一个文件错误或者异常,都会跳到指定的错误处理页面.    ...

  6. Linux企业级开发技术（4）——epoll企业级开发之epoll例程

    为了使大家更加深入了解epoll模型在企业应用中的使用,下面给出一段基于epoll的服务器代码,并在代码中添加了详细注释: #include <deque> #include <ma ...

  7. 【转】图说Android的8年演变史

    原文网址:http://tech.gmw.cn/2016-02/17/content_18916338_14.htm 图说Android的8年演变史 我有话说    0      2011年10月谷歌 ...

  8. 图论（网络流）：SCOI 2007 修车

    同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使得顾客平均等待的时间最小 ...

  9. 贪心 uvaoj 11134 Fabled Rooks

    Problem F: Fabled Rooks We would like to place n rooks, 1 ≤ n ≤ 5000, on a n×n board subject to the ...

  10. oracle 表的管理(数据类型，表创建删除，数据CRUD 操作)

    表名和列的命名规则