jquery ajax POST/GET 请求至 ASP.NET WebAPI
生活随笔
收集整理的這篇文章主要介紹了
jquery ajax POST/GET 请求至 ASP.NET WebAPI
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.注意要點(diǎn):ajax提交請求的dataType參數(shù)、contentType參數(shù)值應(yīng)該分別為
dataType: 'json' 和 contentType: 'application/json;charset=utf-8'?
不然會報js跨域啊,Method 錯誤啊 等等一些亂七八糟的js錯誤.
下面直接上代碼:
前端代碼:
1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head runat="server"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title></title> 8 <script src="js/jquery-2.2.3.min.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 $('#getData').click(function () { 12 $.ajax({ 13 url: 'http://localhost:58737/api/userInfo/getlist', 14 type: 'get', 15 dataType: 'json', 16 contentType: 'application/json;charset=utf-8', 17 success: function (data) { 18 //以表格的形式在瀏覽器控制臺顯示數(shù)據(jù),IE下不支持 19 console.table(data); 20 } 21 }); 22 }); 23 24 $('#test').click(function () { 25 var school = {}; 26 school.SchoolID = 1; 27 school.SchoolName = "學(xué)校1"; 28 var students = []; 29 for (var i = 0; i < 3; i++) { 30 var student = {}; 31 student.StudentID = (i + 1); 32 student.StudentName = "學(xué)生" + (i + 1); 33 student.SchoolID = 1; 34 students.push(student); 35 } 36 school.Students = students; 37 console.log(JSON.stringify(school)); 38 $.ajax({ 39 url: 'http://localhost:58737/api/Test/AddSchool', 40 type: 'post', 41 dataType: 'json', 42 contentType: 'application/json;charset=utf-8', 43 data: JSON.stringify(school), 44 success: function (data) { 45 console.table(data); 46 }, 47 error: function () { }, 48 beforeSend: function () { }, 49 complete: function () { } 50 }); 51 }); 52 }); 53 </script> 54 </head> 55 56 <body> 57 <form id="form1" runat="server"> 58 <div> 59 <input type="button" value="跨域獲取數(shù)據(jù)" id="getData" /> 60 <br /> 61 <hr /> 62 <input type="button" value=" Test " id="test" /> 63 </div> 64 </form> 65 </body> 66 67 </html>后臺控制器代碼:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Net.Http; 6 using System.Web.Http; 7 8 namespace WebApi_demo.Controllers 9 { 10 public class TestController : ApiController 11 { 12 /// <summary> 13 /// post /api/Test/AddSchool 14 /// </summary> 15 [HttpPost] 16 public SchoolModel AddSchool(SchoolModel item) 17 { 18 return item; 19 } 20 } 21 public class SchoolModel : School 22 { 23 public List<Student> Students { get; set; } 24 } 25 public class School 26 { 27 public int SchoolID { get; set; } 28 public string SchoolName { get; set; } 29 } 30 public class Student 31 { 32 public int StudentID { get; set; } 33 public string StudentName { get; set; } 34 public int SchoolID { get; set; } 35 } 36 } 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Net.Http; 6 using System.Web.Http; 7 8 namespace WebApi_demo.Controllers 9 { 10 public class UserInfoController : ApiController 11 { 12 /// <summary> 13 /// 獲取用戶信息集合的方法 14 /// </summary> 15 /// <returns>返回用戶信息集合</returns> 16 public IHttpActionResult GetList() 17 { 18 //對象集合模擬數(shù)據(jù) 19 List<UserInfo> list = new List<UserInfo>() 20 { 21 new UserInfo() 22 { 23 Id = 1, 24 UserName = "1張三", 25 UserPass = "FDASDFAS", 26 Email = "zhangsan@163.com", 27 RegTime = DateTime.Now 28 }, 29 new UserInfo() 30 { 31 Id = 2, 32 UserName = "2李四", 33 UserPass = "FDASDFAS", 34 Email = "lisi@163.com", 35 RegTime = DateTime.Now 36 }, 37 new UserInfo() 38 { 39 Id = 3, 40 UserName = "3王五", 41 UserPass = "FDASDFAS", 42 Email = "wangwu@163.com", 43 RegTime = DateTime.Now 44 }, 45 new UserInfo() 46 { 47 Id = 4, 48 UserName = "4趙六", 49 UserPass = "FDASDFAS", 50 Email = "zhaoliu@163.com", 51 RegTime = DateTime.Now 52 }, 53 new UserInfo() 54 { 55 Id = 5, 56 UserName = "5田七", 57 UserPass = "FDASDFAS", 58 Email = "tianqi@163.com", 59 RegTime = DateTime.Now 60 }, 61 new UserInfo() 62 { 63 Id = 6, 64 UserName = "6王八", 65 UserPass = "FDASDFAS", 66 Email = "wangba@163.com", 67 RegTime = DateTime.Now 68 } 69 }; 70 return Ok(list); 71 } 72 73 public class UserInfo 74 { 75 public int Id { get; set; } 76 77 public string UserName { get; set; } 78 79 public string UserPass { get; set; } 80 81 public string Email { get; set; } 82 83 public DateTime RegTime { get; set; } 84 } 85 } 86 }?效果圖:
轉(zhuǎn)載于:https://www.cnblogs.com/AlbertSmith/p/9764432.html
總結(jié)
以上是生活随笔為你收集整理的jquery ajax POST/GET 请求至 ASP.NET WebAPI的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mac的文件比对工具：Meld、Beyo
- 下一篇： Oracle数据类型与.NET中的对应关