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. mapreduce (七) 几个实例

    http://hi.baidu.com/hzd2712/item/d2465ae65270ab3e4cdcaf55 MapReduce几个典型的例子 在Google的<MapReduce: Si ...

  2. List of XML and HTML character entity references

    A character entity reference refers to the content of a named entity. An entity declaration is creat ...

  3. BZOJ 1823 满汉全席

    Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...

  4. Selenium 自动化验收测试

    Web 应用程序的验收测试常常涉及一些手工任务,例如打开一个浏览器,并执行一个测试用例中所描述的操作.但是手工执行的任务容易出现操作人员人为的错误,也比较费时间.因此,尽可能将这些任务自动化,以消除人 ...

  5. Keil MDK与h-jtag联调

    keil MDK也是可以借助h-jtag进行单步调试,写出来与大家一起分享一下. keil MDK编译器使用V4.01版本,下载地址:http://www.embedinfo.com/down-lis ...

  6. webserver/CGI

    来自:http://blog.sina.com.cn/s/blog_466c6640010000nj.html   1. TUX2. lighttpd,thttpd,shttpd 3. 几种web s ...

  7. Chrome DevTools学习笔记

    ---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...

  8. bzoj 3572 [Hnoi2014]世界树（虚树+DP）

    3572: [Hnoi2014]世界树 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 645  Solved: 362[Submit][Status] ...

  9. C++排序

    浅谈C++之冒泡排序.希尔排序.快速排序.插入排序.堆排序.基数排序性能对比分析(好戏在后面,有图有真相) 最近一段时间去武汉参加了N多笔试,在几次试题中都出现了排序.偏偏出现了我没怎么看的插入排序, ...

  10. Web 测试笔记

    测试难点 主要是模块之间的同步问题. 测试容易忽略的地方 1. 各种标题.包括页面“标签页”的标题,弹出框的标题.由于开发经常直接用之前的页面,比如编辑可能直接用新增的页面,导致标题出错. 2. 最大 ...