WebApi2
WebApi(2)
代码直接使用前面的
1.返回值
在前面用浏览器调试的时候,返回结果有时候是xml格式,有时候json字符串,这个很多是取决于浏览器的.其实可以指定是xml还是json. 在Startup中加入下面代码,就可以指明是xml还是json格式
config.Formatters.Clear();
config.Formatters.Add(new XmlMediaTypeFormatter());
//config.Formatters.Add(new JsonMediaTypeFormatter());
2.路由
Startup类中的 config.Routes.MapHttpRoute方法,涉及到webapi的路由,情况还是比较复杂的,网上的资料也比较多,此处不讨论.
3.调用
webapi涉及的纯数据,写出来肯定就是给别人调用的,这么说起来好有道理的样子.
3.1使用js调用
创建一个空网站,增加一个aspx界面,引入jquery.增加2个Div,一个用来点击,一个用来显示结果.
<form id="form1" runat="server">
<div id="divTest">Click Me</div>
<div id="divResult">Empty</div>
</form>
3.2 试验1
$("#divTest").click(function () {
$.ajax({
type: "get",
url: "http://localhost:8777/api/student/1234",
//data: jsonStr,
dataType: 'JSON',
contentType: "Application/json;charset=utf-8",
success: function (msg) {
$("#divResult").text(JSON.stringify(msg))
},
error: function (err) {
alert(err);
}
})
});
浏览器报错了,
XMLHttpRequest cannot load http://localhost:8777/api/student/get.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:58254' is therefore not allowed access.
其实这就是涉及到了webapi的跨域访问.这里直接给处理结果吧了. 添加
p8 (Microsoft.AspNet.WebApi.Cors),在startup中添加代码
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
然后浏览aspx,点击Click Me,返回如下.
{"ID":"1234","Name":"Lily","Birthday":"2008-09-13T14:57:05.3306473+08:00"}
3.3试验2
在controller中添加一个方法
public Student Get(string id,string name)
{
return new Student()
{
ID = id,
Name = name,
Birthday = DateTime.Now.AddYears(-10)
};
}
添加一个div,id=divTest2,然后调用
$("#divTest2").click(function () {
$.ajax({
type: "get",
url: "http://localhost:8777/api/student/",
data: {iD:"id2",Name:"name2"},
dataType: 'JSON',
contentType: "Application/json;charset=utf-8",
success: function (msg) {
// var jsonObj = JSON.parse(msg.d);
// alert(jsonObj);
$("#divResult").text(JSON.stringify(msg))
},
error: function (err) {
alert(err);
}
})
});
成功返回 {"ID":"id2","Name":"name2","Birthday":"2008-09-13T15:07:34.9697077+08:00"}
3.4试验get,参数是对象
增加方法,先注释掉以前2个get方法,由于路由问题,不注释的话,他会调用前面的方法.
public Student Get(Student student)
{
return student;
}
//调用
$("#divTest3").click(function () {
$.ajax({
type: "get",
url: "http://localhost:8777/api/student/",
data: { iD: "id3", Name: "name3" ,birthday:new Date()},
dataType: 'JSON',
contentType: "Application/json;charset=utf-8",
success: function (msg) {
// var jsonObj = JSON.parse(msg.d);
// alert(jsonObj);
$("#divResult").text(JSON.stringify(msg))
},
error: function (err) {
alert(err);
}
})
});
出错了,500 (Internal Server Error) 错误.将参数添加 [FromUri],变成
public Student Get([FromUri]Student student)
{
return student;
}
再次调用,成功!!传说也可以在html中先将对象变成string,把Get方法参数修改成string,然后JsonConvert.DeserializeObject转换一下,这样应该是可以的,但是太不完美了.
3.4 第一个post
增加方法
[HttpPost]
public Student PostData([FromBody]string id)
{
return new Student()
{
ID = id,
Name = "post name",
Birthday = DateTime.Now.AddYears(-10)
};
}
前端
$("#divTest4").click(function () {
$.ajax({
type: "post",
url: "http://localhost:8777/api/student/",
data: { ID: "id4"},
dataType: 'JSON',
contentType: "Application/json;charset=utf-8",
success: function (msg) {
// var jsonObj = JSON.parse(msg.d);
// alert(jsonObj);
$("#divResult").text(JSON.stringify(msg))
},
error: function (err) {
alert(err);
}
})
});
返回:
{"ID":null,"Name":"post name","Birthday":"2008-09-13T15:42:46.1330954+08:00"}
乍一看,没问题,但是ID为啥null. 网上有人说,如果此处的前端参数data这样写: data: { "": "id4"},然后能返回正确结果,但是我试了,却没有成功.只有按照下面的方法: 修改Post方法:
[HttpPost]
public Student PostData(dynamic student)
{
return new Student()
{
ID = student.ID+" dyn",
Name = student.Name,
Birthday = student.Birthday
};
}
修改前端请求方法
$("#divTest4").click(function () {
$.ajax({
type: "post",
url: "http://localhost:8777/api/student/",
data: JSON.stringify( { ID: "id4", Name: "post name", Birthday: "2000-1-1 19:2:2" }),
dataType: 'JSON',
contentType: "Application/json",
success: function (msg) {
// var jsonObj = JSON.parse(msg.d);
// alert(jsonObj);
$("#divResult").text(JSON.stringify(msg))
},
error: function (err) {
alert(err);
}
})
});
需要注意的是:参数data是字符串 这些神奇的使用方法,听说只是在ajax中才会有这么多奇葩,直接用HttpClient可能不会这么复杂.