1.注意要点:ajax提交请求的dataType参数、contentType参数值应该分别为
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 //以表格的形式在浏览器控制台显示数据,IE下不支持 19 console.table(data); 20 } 21 }); 22 }); 23 24 $('#test').click(function () { 25 var school = {}; 26 school.SchoolID = 1; 27 school.SchoolName = "学校1"; 28 var students = []; 29 for (var i = 0; i < 3; i++) { 30 var student = {}; 31 student.StudentID = (i + 1); 32 student.StudentName = "学生" + (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="跨域获取数据" 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 //对象集合模拟数据 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 }
效果图:
