web api
web api
jquery call
---------------------------html-----------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#Button0').click(function () {
//一. 无参数 Get 请求
$.get("api/user/getuser", function (data) {
console.log(data);
});
//二. 无参数 Get 请求
//$.ajax({
// url: "api/user/getuser",
// type: "get",
// success: function (data) {
// console.log(data);
// }
//});
//三、传递一个参数的 Get 请求
//$.ajax({
// url: "api/user/GetName",
// type: "get",
// data:{"name":"赵大宝"},
// success: function (data) {
// console.log(data);
// }
//});
//四、传递两个参数的 Get请求
//$.ajax({
// url: "api/user/GetName",
// type: "get",
// data: { "name": "赵大宝","age":12 },
// success: function (data) {
// console.log(data);
// }
//});
//五、无参数 Post 请求
//$.ajax({
// url: "api/user/abc",
// type: "post",
// success: function (data) {
// console.log(data);
// }
//});
//六、传递一个参数的 Post 请求
//$.ajax({
// url: "api/user/def",
// type: "post",
// //data: { "name": "赵大宝" }, // key=value 的键值对方式， 但后台接收值为null
// data: { "": "赵大宝" }, // key设置为空
// success: function (data) {
// console.log(data);
// }
//});
//七、 传递两个参数的Post请求
//$.ajax({
// url: "api/user/hig",
// type: "post",
// data: { "Name": "赵大宝","Age":13 },
// success: function (data) {
// console.log(data);
// }
//});
//八、使用json格式传递两个参数的post请求
//var Student = {
// Name:"张飞",
// Age:35
//};
//$.ajax({
// url: "api/user/hig",
// type: "post",
// // data: { "Name": "赵大宝", "Age": 13 },//传统表单数据传递方式发送请求数据
// data:JSON.stringify(Student), // 传递Json格式请求数据
// contentType: "application/json",//指定 请求类型 否则 Content-Type: application/x-www-form-urlencoded
// success: function (data) {
// console.log(data);
// }
//});
//九、 传递多个参数的post请求
//var album = {
// AName: "我的相册",
// ADate:"2014-08-19",
// ASize: 50,
// ALock:true
//};
//$.ajax({
// url: "api/user/xyz",
// type: "post",
// data: JSON.stringify(album), // 传递Json格式请求数据
// contentType: "application/json",//指定 请求类型 否则 Content-Type: application/x-www-form-urlencoded
// success: function (data) {
// console.log(data);
// }
//});
//十、传递多个对象的多个属性 的post请求
//var Stu2 = {
// Name: "刘备",
// Age: "30"
//};
//var album2 = {
// AName: "风景",
// ADate: "2014-08-19",
// ASize: 20,
// ALock:false
//}
//$.ajax({
// url: "api/user/mno",
// type: "post",
// data: JSON.stringify({student:Stu2,album:album2}),
// contentType: "application/json",
// dataType:"xml",
// success: function (data) {
// console.log(data);
// }
//});
//十一、 指定返回类型的post请求
//var stu3 = {
// Name: "张飞",
// Age:40
//};
//$.ajax({
// url: "api/user/tolist",
// type: "post",
// data: JSON.stringify(stu3),
// contentType:"application/json",//指定请求类型为json格式
// dataType: "xml",//指定输出类型为xml格式
// dataType: "json",//指定输出类型为json格式
// success: function (data) {
// console.log(data);
// }
//});
});
})
</script>
</head>
<body>
<div id="main" style="text-align:100%;">
<div id="left" style="text-align:100px; width: 275px;">
<input type="button" id="Button0" value="getuser" /><br /><br />
<input type="button" id="Button1" value="getuser无参数 Get 请求ajax" /><br /><br />
<input type="button" id="Button2" value="GetName" /><br /><br />
<input type="button" id="Button3" value="提交4" /><br /><br />
<input type="button" id="Button4" value="提交5" /><br /><br />
<input type="button" id="Button5" value="提交6" /><br /><br />
<input type="button" id="Button6" value="提交7" /><br /><br />
<input type="button" id="Button7" value="提交8" /><br /><br />
<input type="button" id="Button9" value="提交9" /><br /><br />
<input type="button" id="Button10" value="提交10" /><br /><br />
<input type="button" id="Button11" value="提交11" /><br /><br />
</div>
<div id="content" style="text-align:90%; height: 28px; width: 293px;">
center
</div>
</div>
</body>
</html>
-------controller.cs------------
public class UserController : ApiController
{
//前台页面直接获取数据
public List<Users> GetUser()
{
var userList = new List<Users> {
new Users{ Id=1,UName="张三",UAge=12,UAddress="海淀区"},
new Users{Id=2,UName="李四",UAge=23,UAddress="昌平区"},
new Users{Id=3,UName="王五",UAge=34,UAddress="朝阳区"}
};
var temp = (from u in userList
select u).ToList();
return temp;
}
//前台发送Get请求，获取一个参数的情况
public string GetName(string name)
{
return string.Format("姓名：{0}。", name);
}
//前台发送Get请求，获取两个参数的情况
public string GetName(string name, string age)
{
return string.Format("姓名：{0}，年龄：{1}。", name, age);
}
//前台发送无参Post请求
public List<Users> Abc()
{
var userList = new List<Users> {
new Users{ Id=1,UName="张三1",UAge=12,UAddress="海淀区1"},
new Users{Id=2,UName="李四2",UAge=23,UAddress="昌平区2"}
};
var temp = (from u in userList
select u).ToList();
return temp;
}
// 前台发送 一个参数的Post请求
public string Def([FromBody]string name)
{
return string.Format("姓名：{0}。", name);
}
public class Student
{
public string Name { get; set; }
public int Age { get; set; }
}
//前台发送 两个参数的Post请求
public string Hig([FromBody]Student stu)
{
return string.Format("姓名：{0}，年龄：{1}。", stu.Name, stu.Age);
}
public class Album
{
public string AName { get; set; }
public DateTime ADate { get; set; }
public int ASize { get; set; }
public bool ALock { get; set; }
}
//前台发送多个参数的Post请求
public string Xyz([FromBody]Album album)
{
return string.Format("AName:{0},ADate:{1},ASzie:{2},ALock:{3}。", album.AName, album.ADate, album.ASize, album.ALock);
}
// 前台发送 多个对象的多个属性 post请求
public string Mno([FromBody]JObject jdata)
{
dynamic json = jdata;
JObject jstu = json.student;
JObject jalbum = json.album;
var stu = jstu.ToObject<Student>();
var album = jalbum.ToObject<Album>();
return string.Format("stu的name:{0},album的size:{1}。",stu.Name,album.ASize);
}
//前台页面指定输出类型的 post请求
public Student Tolist([FromBody]Student stu)
{
return stu;
}
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！