jquery ajax POST/GET 请求至 ASP.NET WebAPI

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 }

效果图:

转载于:https://www.cnblogs.com/AlbertSmith/p/9764432.html

jquery ajax POST/GET 请求至 ASP.NET WebAPI相关推荐

jquery ajax多次请求接口解决方案
jquery ajax多次请求接口解决方案参考文章: (1)jquery ajax多次请求接口解决方案 (2)https://www.cnblogs.com/DreamLiFeng/p/100088 ...
jQuery Ajax： $.post请求示例
jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...
jQuery ajax跨域请求的解决方法
jQuery ajax跨域请求的解决方法参考文章: (1)jQuery ajax跨域请求的解决方法 (2)https://www.cnblogs.com/freeweb/p/4908832.html ...
jquery ajax 跨域请求
今天使用JQuery Ajax 在本地电脑获取远程服务器数据的时候,发现使用$.ajax,$.getJSON,$.get这些都没有反应,后来再统一个网站下测试了一下,代码写得没有问题.后来想了想好想, ...
xhr如何发送post请求_xhr 或 jQuery ajax， Post 请求如何获得 303 状态的返回结果
问题网站 http://www.xingk.cc/forum.php... 需注册,比较麻烦,下面给一个临时账号账号:爱玩屎的阿拉蕾密码:Av123456! 问题描述论坛的网盘地址被加了跳转链, ...
jquery ajax无刷新请求Struts2验证用户名密码数据库是否存在
通过ajax请求验证后台数据是否存在. 首先导入struts2的核心包. 后台Action代码 import com.opensymphony.xwork2.ActionSupport;public ...
ajax获得header信息,关于jquery ajax跨域请求获取response headers问题
背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器服务器进行验证用户的信息服务器通过验证发送给用户一 ...
PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法
// 前台代码 $.ajax({url: 'http://www.ushark.net/home/save_trial_apply',dataType: 'jsonp',processData: fa ...

jquery ajax POST/GET 请求至 ASP.NET WebAPI

jquery ajax POST/GET 请求至 ASP.NET WebAPI相关推荐

最新文章

热门文章