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