mvc WebAPi学习,接口定义和前台调用

来源：互联网发布：大兴网络营销软件编辑：程序博客网时间：2024/05/18 13:11

实体类：

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,后台接收不到数据，
/// </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结束------------------------------------------------------------------------------------------------------------------------------

阅读全文

0 0