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 }
效果图:
