mvc WebAPi学习,接口定义和前台调用
2017-07-29 11:39
309 查看
实体类：
public class Contact
{
public int ID { get; set; }
public string Name { get; set; }
public string Sex { get; set; }
public DateTime Birthday { get; set; }
public int Age { get; set; }
}
--------------------------------------------------------------------------------------GET开始---------------------------------------------------------------------------------------------------------------------------------
后台方法：
/// <summary>
/// get无参数请求接口
/// </summary>
/// <returns></returns>
public string GetAll()
{
return "GetAll调用成功";
}
/// <summary>
/// get一个参数接口
/// </summary>
/// <param name="Name"></param>
/// <returns></returns>
public string GetBy1Parm(string Name)
{
return Name;
}
/// <summary>
/// get多个参数
/// </summary>
/// <param name="name"></param>
/// <param name="age"></param>
/// <returns></returns>
public string GetByMoreParm(string name, int age)
{
return name + ":" + age;
}
/// <summary>
/// get 后台用实体接收 必须加[FromUri] get请求的时候，默认是将参数全部放到了url里面直接以string的形式传递的，
/// 后台自然接不到了。Get请求的时候可以在参数里面加上[FromUri]即可直接得到对象
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
public string GetByEntity([FromUri]Contact entity)
{
return JsonConvert.SerializeObject(entity);
}
/// <summary>
/// get 前台把数据序列化 后台反序列化得到数据
/// </summary>
/// <param name="entityString"></param>
/// <returns></returns>
public string GetByEntityStr(string entityString)
{
var entity = JsonConvert.DeserializeObject<Contact>(entityString);
return JsonConvert.SerializeObject(entity);
}
/// <summary>
/// Get 实体和基础类型一起作为参数传递
/// </summary>
/// <param name="entity"></param>
/// <param name="str"></param>
/// <returns></returns>
public string GetEntityAndString([FromUri]Contact entity, string str)
{
var entityStr = JsonConvert.SerializeObject(entity);
return "str:" + str + "---------entityString" + entityStr;
}
前端方法：
//get无参数请求接口
$("#GetAll").click(function () {
$.getJSON("/api/Contact/GetAll", {}, function (data) {
layer.msg(data);
});
});
//get一个参数接口
$("#GetBy1Parm").click(function () {
$.getJSON("/api/Contact/GetBy1Parm", { Name: "张三" }, function (data) {
layer.msg(data);
});
});
//get多个参数
$("#GetByMoreParm").click(function () {
$.getJSON("/api/Contact/GetByMoreParm", {name:"李四",age:18}, function (data) {
layer.msg(data);
});
});
// get 后台用实体接收 必须加[FromUri] get请求的时候，默认是将参数全部放到了url里面直接以string的形式传递的，
$("#GetByEntity").click(function () {
var postData={ ID:1, Age:23, Birthday:"1977-05-30", Name:"情缘", Sex:"男"};
$.getJSON("/api/Contact/GetByEntity", postData, function (data) {
layer.msg(data);
});
});
//get 前台把数据序列化 后台反序列化得到数据
$("#GetByEntityStr").click(function () {
var postData = { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" };
$.getJSON("/api/Contact/GetByEntityStr", { entityString: JSON.stringify(postData) }, function (data) {
layer.msg(data);
});
});
//Get 实体和基础类型一起作为参数传递
$("#GetEntityAndString").click(function () {
var postData = { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" };
$.getJSON("/api/Contact/GetEntityAndString", { entity: postData, str: ".net" }, function (data) {
layer.msg(data);
});
});
--------------------------------------------------------------------------------------GET结束-----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------Post开始------------------------------------------------------------------------------------------------------------------------------
后台：
/// <summary>
/// 无参数Post请求
/// </summary>
/// <returns></returns>
public string PostAll()
{
return "接口调用成功";
}
/// <summary>
/// Post一个参数 必须加[FromBody]
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
public string Post1Parm([FromBody]string name)
{
return name;
}
/// <summary>
/// post多个参数 不可和上面一个参数方法一样 [FromBody]string name，[FromBody]string sex,后台接收不到数据，
4000
/// </summary>
/// <param name="obj"></param>
/// <returns></returns>
public string PostMoreParm(dynamic obj)
{
string name = Convert.ToString(obj.name);
string sex = Convert.ToString(obj.sex);
int age = Convert.ToInt32(Convert.ToString(obj.age));
return "姓名：" + name + "、性别：" + sex + "、年龄" + age;
}
/// <summary>
/// Post 实体接收
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
public string PostEntity(Contact entity)
{
return JsonConvert.SerializeObject(entity);
}
/// <summary>
/// Post 实体和基础类型一起作为参数传递
/// </summary>
/// <param name="obj"></param>
/// <returns></returns>
public string PostEntityAndString(dynamic obj)
{
string str = Convert.ToString(obj.str);
string entityString = Convert.ToString(obj.entity);
Contact entity = JsonConvert.DeserializeObject<Contact>(entityString);//反序列化得到实体
return "str:" + str + "---------entityString" + entityString;
}
/// <summary>
/// Post传递数组
/// </summary>
/// <param name="arr"></param>
/// <returns></returns>
public string PostArr(int[] arr)
{
Array.Sort(arr);
var result = string.Empty;
for (int i = 0; i < arr.Length; i++)
{
result += arr[i] + ",";
}
if (result.EndsWith(","))
{
result = result.TrimEnd(',');
}
return "后台获取到的数组参数为："+result;
}
/// <summary>
/// Post传递List
/// </summary>
/// <param name="list"></param>
/// <returns></returns>
public string PostList(List<Contact> list)
{
var result = string.Empty;
foreach (var l in list)
{
result += JsonConvert.SerializeObject(l)+"---";
}
return "后台获取到的List为：" + result;
}
前台代码：
//无参数Post请求
$("#PostAll").click(function () {
$.ajax({
url: "/api/Contact/PostAll",
data: {},
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//Post一个参数一般的通过url取参数的机制是键值对，即某一个key等于某一个value，
//而这里的FromBody和我们一般通过url取参数的机制则不同，它的机制是=value，
//没有key的概念，并且如果你写了key(比如你的ajax参数写的{name:"Jack"})，后台反而得到的NAME等于null
$("#Post1Parm").click(function () {
$.ajax({
url: "/api/Contact/Post1Parm",
data: {"":"Jack"},
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//post多个参数 因后台用dynic动态接收 所以前台必须用序列化参数 并且加请求类型contentType:"application/json",
$("#PostMoreParm").click(function () {
$.ajax({
url: "/api/Contact/PostMoreParm",
data: JSON.stringify({ name: "Rose", sex: "女", age: 21 }),
contentType:"application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//post多个参数 因后台用dynic动态接收 所以前台必须用序列化参数 并且加请求类型contentType:"application/json",
$("#PostMoreParm").click(function () {
$.ajax({
url: "/api/Contact/PostMoreParm",
data: JSON.stringify({ name: "Rose", sex: "女", age: 21 }),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//post后台实体接收
$("#PostEntity").click(function () {
//方法一 直接传递参数
$.ajax({
url: "/api/Contact/PostEntity",
data: { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" },
type: "post",
async: false,
success: function (data) {
layer.msg(data);
}
});
//方法一 传递序列化的参数 同时要加上contentType: "application/json",属性
$.ajax({
url: "/api/Contact/PostEntity",
data: JSON.stringify({ ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" }),
contentType: "application/json",
type: "post",
async: false,
success: function (data) {
layer.msg(data);
}
});
});
//post实体类型和基本类型一起传递
$("#PostEntityAndString").click(function () {
var entity = { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" };
$.ajax({
url: "/api/Contact/PostEntityAndString",
data: JSON.stringify({ str: "C#", entity: entity }),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//Post传递数组 注意contentType: "application/json",
$("#PostArr").click(function () {
var arr = [1,2,3,4,5,88,77,55,33,22];
$.ajax({
url: "/api/Contact/PostArr",
data: JSON.stringify(arr),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//Post传递数组 注意contentType: "application/json",
$("#PostList").click(function () {
var list = [
{ ID: 1, Age: 11, Birthday: "1977-05-30", Name: "aaaaa", Sex: "男" },
{ ID: 2, Age: 22, Birthday: "1977-05-30", Name: "sssss", Sex: "男" },
{ ID: 3, Age: 33, Birthday: "1977-05-30", Name: "ddddd", Sex: "男" },
{ ID: 4, Age: 44, Birthday: "1977-05-30", Name: "ggggg", Sex: "男" },
{ ID: 5, Age: 55, Birthday: "1977-05-30", Name: "fffff", Sex: "男" },
];
$.ajax({
url: "/api/Contact/PostList",
data: JSON.stringify(list),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
-------------------------------------------------------------------------------------Post结束------------------------------------------------------------------------------------------------------------------------------
public class Contact
{
public int ID { get; set; }
public string Name { get; set; }
public string Sex { get; set; }
public DateTime Birthday { get; set; }
public int Age { get; set; }
}
--------------------------------------------------------------------------------------GET开始---------------------------------------------------------------------------------------------------------------------------------
后台方法：
/// <summary>
/// get无参数请求接口
/// </summary>
/// <returns></returns>
public string GetAll()
{
return "GetAll调用成功";
}
/// <summary>
/// get一个参数接口
/// </summary>
/// <param name="Name"></param>
/// <returns></returns>
public string GetBy1Parm(string Name)
{
return Name;
}
/// <summary>
/// get多个参数
/// </summary>
/// <param name="name"></param>
/// <param name="age"></param>
/// <returns></returns>
public string GetByMoreParm(string name, int age)
{
return name + ":" + age;
}
/// <summary>
/// get 后台用实体接收 必须加[FromUri] get请求的时候，默认是将参数全部放到了url里面直接以string的形式传递的，
/// 后台自然接不到了。Get请求的时候可以在参数里面加上[FromUri]即可直接得到对象
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
public string GetByEntity([FromUri]Contact entity)
{
return JsonConvert.SerializeObject(entity);
}
/// <summary>
/// get 前台把数据序列化 后台反序列化得到数据
/// </summary>
/// <param name="entityString"></param>
/// <returns></returns>
public string GetByEntityStr(string entityString)
{
var entity = JsonConvert.DeserializeObject<Contact>(entityString);
return JsonConvert.SerializeObject(entity);
}
/// <summary>
/// Get 实体和基础类型一起作为参数传递
/// </summary>
/// <param name="entity"></param>
/// <param name="str"></param>
/// <returns></returns>
public string GetEntityAndString([FromUri]Contact entity, string str)
{
var entityStr = JsonConvert.SerializeObject(entity);
return "str:" + str + "---------entityString" + entityStr;
}
前端方法：
//get无参数请求接口
$("#GetAll").click(function () {
$.getJSON("/api/Contact/GetAll", {}, function (data) {
layer.msg(data);
});
});
//get一个参数接口
$("#GetBy1Parm").click(function () {
$.getJSON("/api/Contact/GetBy1Parm", { Name: "张三" }, function (data) {
layer.msg(data);
});
});
//get多个参数
$("#GetByMoreParm").click(function () {
$.getJSON("/api/Contact/GetByMoreParm", {name:"李四",age:18}, function (data) {
layer.msg(data);
});
});
// get 后台用实体接收 必须加[FromUri] get请求的时候，默认是将参数全部放到了url里面直接以string的形式传递的，
$("#GetByEntity").click(function () {
var postData={ ID:1, Age:23, Birthday:"1977-05-30", Name:"情缘", Sex:"男"};
$.getJSON("/api/Contact/GetByEntity", postData, function (data) {
layer.msg(data);
});
});
//get 前台把数据序列化 后台反序列化得到数据
$("#GetByEntityStr").click(function () {
var postData = { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" };
$.getJSON("/api/Contact/GetByEntityStr", { entityString: JSON.stringify(postData) }, function (data) {
layer.msg(data);
});
});
//Get 实体和基础类型一起作为参数传递
$("#GetEntityAndString").click(function () {
var postData = { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" };
$.getJSON("/api/Contact/GetEntityAndString", { entity: postData, str: ".net" }, function (data) {
layer.msg(data);
});
});
--------------------------------------------------------------------------------------GET结束-----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------Post开始------------------------------------------------------------------------------------------------------------------------------
后台：
/// <summary>
/// 无参数Post请求
/// </summary>
/// <returns></returns>
public string PostAll()
{
return "接口调用成功";
}
/// <summary>
/// Post一个参数 必须加[FromBody]
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
public string Post1Parm([FromBody]string name)
{
return name;
}
/// <summary>
/// post多个参数 不可和上面一个参数方法一样 [FromBody]string name，[FromBody]string sex,后台接收不到数据，
4000
/// </summary>
/// <param name="obj"></param>
/// <returns></returns>
public string PostMoreParm(dynamic obj)
{
string name = Convert.ToString(obj.name);
string sex = Convert.ToString(obj.sex);
int age = Convert.ToInt32(Convert.ToString(obj.age));
return "姓名：" + name + "、性别：" + sex + "、年龄" + age;
}
/// <summary>
/// Post 实体接收
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
public string PostEntity(Contact entity)
{
return JsonConvert.SerializeObject(entity);
}
/// <summary>
/// Post 实体和基础类型一起作为参数传递
/// </summary>
/// <param name="obj"></param>
/// <returns></returns>
public string PostEntityAndString(dynamic obj)
{
string str = Convert.ToString(obj.str);
string entityString = Convert.ToString(obj.entity);
Contact entity = JsonConvert.DeserializeObject<Contact>(entityString);//反序列化得到实体
return "str:" + str + "---------entityString" + entityString;
}
/// <summary>
/// Post传递数组
/// </summary>
/// <param name="arr"></param>
/// <returns></returns>
public string PostArr(int[] arr)
{
Array.Sort(arr);
var result = string.Empty;
for (int i = 0; i < arr.Length; i++)
{
result += arr[i] + ",";
}
if (result.EndsWith(","))
{
result = result.TrimEnd(',');
}
return "后台获取到的数组参数为："+result;
}
/// <summary>
/// Post传递List
/// </summary>
/// <param name="list"></param>
/// <returns></returns>
public string PostList(List<Contact> list)
{
var result = string.Empty;
foreach (var l in list)
{
result += JsonConvert.SerializeObject(l)+"---";
}
return "后台获取到的List为：" + result;
}
前台代码：
//无参数Post请求
$("#PostAll").click(function () {
$.ajax({
url: "/api/Contact/PostAll",
data: {},
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//Post一个参数一般的通过url取参数的机制是键值对，即某一个key等于某一个value，
//而这里的FromBody和我们一般通过url取参数的机制则不同，它的机制是=value，
//没有key的概念，并且如果你写了key(比如你的ajax参数写的{name:"Jack"})，后台反而得到的NAME等于null
$("#Post1Parm").click(function () {
$.ajax({
url: "/api/Contact/Post1Parm",
data: {"":"Jack"},
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//post多个参数 因后台用dynic动态接收 所以前台必须用序列化参数 并且加请求类型contentType:"application/json",
$("#PostMoreParm").click(function () {
$.ajax({
url: "/api/Contact/PostMoreParm",
data: JSON.stringify({ name: "Rose", sex: "女", age: 21 }),
contentType:"application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//post多个参数 因后台用dynic动态接收 所以前台必须用序列化参数 并且加请求类型contentType:"application/json",
$("#PostMoreParm").click(function () {
$.ajax({
url: "/api/Contact/PostMoreParm",
data: JSON.stringify({ name: "Rose", sex: "女", age: 21 }),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//post后台实体接收
$("#PostEntity").click(function () {
//方法一 直接传递参数
$.ajax({
url: "/api/Contact/PostEntity",
data: { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" },
type: "post",
async: false,
success: function (data) {
layer.msg(data);
}
});
//方法一 传递序列化的参数 同时要加上contentType: "application/json",属性
$.ajax({
url: "/api/Contact/PostEntity",
data: JSON.stringify({ ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" }),
contentType: "application/json",
type: "post",
async: false,
success: function (data) {
layer.msg(data);
}
});
});
//post实体类型和基本类型一起传递
$("#PostEntityAndString").click(function () {
var entity = { ID: 1, Age: 23, Birthday: "1977-05-30", Name: "情缘", Sex: "男" };
$.ajax({
url: "/api/Contact/PostEntityAndString",
data: JSON.stringify({ str: "C#", entity: entity }),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//Post传递数组 注意contentType: "application/json",
$("#PostArr").click(function () {
var arr = [1,2,3,4,5,88,77,55,33,22];
$.ajax({
url: "/api/Contact/PostArr",
data: JSON.stringify(arr),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
});
//Post传递数组 注意contentType: "application/json",
$("#PostList").click(function () {
var list = [
{ ID: 1, Age: 11, Birthday: "1977-05-30", Name: "aaaaa", Sex: "男" },
{ ID: 2, Age: 22, Birthday: "1977-05-30", Name: "sssss", Sex: "男" },
{ ID: 3, Age: 33, Birthday: "1977-05-30", Name: "ddddd", Sex: "男" },
{ ID: 4, Age: 44, Birthday: "1977-05-30", Name: "ggggg", Sex: "男" },
{ ID: 5, Age: 55, Birthday: "1977-05-30", Name: "fffff", Sex: "男" },
];
$.ajax({
url: "/api/Contact/PostList",
data: JSON.stringify(list),
contentType: "application/json",
type: "post",
success: function (data) {
layer.msg(data);
}
});
-------------------------------------------------------------------------------------Post结束------------------------------------------------------------------------------------------------------------------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- c# 【MVC】WebApi通过HttpClient来调用Web Api接口
- c# 【MVC】WebApi通过HttpClient来调用Web Api接口
- 20170206学习日记02：输入输出流,定义接口调用接口，各式类，实现接口各种方式
- c# 【MVC】WebApi通过HttpClient来调用Web Api接口
- idea+springmvc+maven学习http接口
- python学习笔记--函数定义、调用与默认参数
- [学习笔记]外部调用本地接口返回JSON数据
- 03-python学习笔记：函数-调用与定义
- 初学Web接口调用的一些学习笔记
- 8dc5 java和c#接口定义区别--学习笔记
- Objective-C学习笔记（十八）——对象方法和类方法的声明，定义及调用
- ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步
- asp.net mvc webapi 实用的接口加密方法
- JavaScript学习笔记6-函数的定义和调用
- 编写Animal接口，接口声明run()方法定义Bird类和Fish类实现Animal接口编写Bird类和Fish类的测试程序，并调用其中的run（）方
- /*1）编写Animal接口，接口中声明run（）方法； 2）定义Bird类和Fish类实现Animal接口； 3）编写Bird类和Fish类的测试程序，并调用其中的run（）方法 */
- MVC学习十一：浅谈在ASP.NET MVC3中使用IClientValidatable接口实现客户端和服务器端同时验证
- 【Java学习】泛型定义在接口上
- C#与Java对比学习：类型判断、类与接口继承、代码规范与编码习惯、常量定义
- Caffe入门实验八：python接口学习 调用