WebAPI学习日记一：Ajax请求传递参数遇到的问题
首先，本人大学刚毕业，想把自己学习的一些东西记录下来，也是和大家分享，如有不对之处还请多加指正。
声明：但凡是我博客里的文章均是本人实际操作遇到的例子，不会随便从网上拷贝或者转载，本着对自己和观众负责的态度。
什么是WebAPI？我的理解是WebAPI+JQuery（前端）基本上能完成Web MVC的功能，即：这么理解吧，WebAPI相当于Web MVC的后台部分。
接下来直接上例子吧，都是我在学习过程中遇到或者发现的一些问题。
一、创建WebAPI项目
（这个环节不是本章重点）
二、传递参数遇到的问题
后台实体类（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"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="submit" id="testId"/>
<input type="text" id="text1"/>
</body>
</html>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<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请求，接下来我们来讲几个比较特殊的例子，希望能加强对WebAPI传参的理解和使用。
①代码修改如下：
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;
}
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="submit" id="testId"/>
<input type="text" id="text1"/>
</body>
</html>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<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"一起后台才能拿到数据。
前端请求：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="submit" id="testId"/>
<input type="text" id="text1"/>
</body>
</html>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<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>
后台接口：
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;
}
}
结果：
三、总结：
本文关于Web API参数请求的情况并没有全部写出来，而是根据本人在学习过程中遇到的一些问题特意记录下来，讲的不明白的地方欢迎讨论交流。我觉得学习软件开发就得知其然，知其所以然，但由于也是刚接触这个Web API，文中蛮多地方，都是自己去测试，去找资料，所以有些地方还不能很好的解释，但我相信这并不结束，而是开始。
WebAPI学习日记一：Ajax请求传递参数遇到的问题的更多相关文章
- Ajax请求传递参数遇到的问题
想写个同类型的,代码未测. 什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分. 接下来直接上 ...
- ajax请求在参数中添加时间戳
ajax请求在参数中添加时间戳 参考网址
- 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）【转】
开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...
- Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）
本文装载自:http://blog.csdn.net/u012737182/article/details/52831008 感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...
- Ajax请求传递数组参数的方法
方法一:拼接字符串参数 var arr={params:['param','param2']}; $.ajax({url:请求地址, data:arr, type:"POST", ...
- springmvc框架下ajax请求传参数中文乱码解决
springmvc框架下jsp界面通过ajax请求后台数据,传递中文参数到后台显示乱码 解决方法:js代码 运用encodeURI处理两次 /* *掩码处理 */ function maskWord( ...
- 复用$.ajax方式传递参数错误处理
1.封装后的方法,在 data:inData 传递参数的方式和一般不一样,如果不注意会出现错误. function getDataByJsonP(methName, inData, fn) { $.a ...
- Ajax请求的参数
post请求和get请求存放参数位置 post请求和get请求存放参数位置是不同的: post方式参数存放在请求数据包的消息体中. get方式参数存放在请求数据包的请求行的URI字段中,以?开始以pa ...
- python学习(26)分析ajax请求抓取今日头条cosplay小姐姐图片
分析ajax请求格式,模拟发送http请求,从而获取网页代码,进而分析取出需要的数据和图片.这里分析ajax请求,获取cosplay美女图片. 登陆今日头条,点击搜索,输入cosplay 下面查看浏览 ...
随机推荐
- [SDOI2016Round1]解题报告
Day1 T1: 题意:求∑n−1i=0∑m−1j=0max((i xor j)−k,0) 由于是抑或操作.每一位都是独立的,所以能够一位一位的算贡献. f[i][a][b][c]表示第i位时.每一个 ...
- JavaScript身份证正则表达式,querySelector通过name获取元素,php正则表达式
var preg_sfz1 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3 ...
- atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包括: 2 2.1. 主要组件体系结构 2 2.2. WebCore ...
- linux下实现CPU使用率和内存使用率获取方法
想获取一下目标机运行时linux系统的硬件占用情况,写了这几个小程序,以后直接用了. 方法就是读取proc下的文件来获取了. cpu使用率: /proc/stat ,内存使用情况: /p ...
- android自定义控件(1)-自定义控件属性
那么还是针对我们之前写的自定义控件:开关按钮为例来说,在之前的基础上,我们来看看有哪些属性是可以自定义的:按钮的背景图片,按钮的滑块图片,和按钮的状态(是开还是关),实际上都应该是可以在xml文件中直 ...
- struts2防止表单重复提交的解决方案
一.造成重复提交主要的两个原因: 在平时的开发过程中,经常可以遇到表单重复提交的问题,如做一个注册页面,如果表单重复提交,那么一个用户就会注册多次,重复提交主要由于两种原因. 1. 一是,服务器 ...
- Ubuntu 16.04安装有道词典
以前用Ubuntu 14.04 的时候,直接下载有道词典官方deb安装包,就安装好了,现在换成Ubuntu 16.04因为有些依赖问题就无法安装成功.于是Google之,成功解决,也顺便熟悉了一下dp ...
- R ggplot2 改变颜色
p<-ggplot(iris,aes(Petal.Length,Petal.Width,color=Species))+geom_point()cols=c("red",&q ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- windows下安装配置apacheserver
注:一開始公布的时候 图片是复制粘贴的.所以公布完图片所有消失了...如今是补发图片. . .2016/04/25 1.进入apache官网 http://httpd.apache.org/ 这里我 ...