在大學學期期間學習的從mvc中的webapi中取數據html
直接看代碼jquery
首先是控制器中的web
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web; using System.Web.Http; using System.Web.Security; namespace WEBAPI.Controllers { //簡歷一個類存儲數據 public class Users { public int Userid { get; set; } public string Username { get; set; } public string pwd { get; set; } } //存儲數據 public class UserController : ApiController { private List<Users> _userlist = new List<Users>() { new Users{Userid=1,Username="jake1",pwd="123"}, new Users{Userid=2,Username="jake2",pwd="123"}, new Users{Userid=3,Username="jake3",pwd="123"}, }; //get獲取數據 //獲取全部數據 //api/User/Get public IEnumerable<Users> Get() { return _userlist; } //根據id獲取當數據 public Users Get(int id) { dynamic u; u = (from c in _userlist where c.Userid.Equals(id) select c).FirstOrDefault();//取到第一條數據 u = _userlist.FirstOrDefault(p => p.Userid.Equals(id)); return u; } //根據對象獲取數據 public Users GetModel([FromUri]Users u) { dynamic us; /* u = (from c in _userlist where c.Userid.Equals(id) select c).FirstOrDefault();*///取到第一條數據 us = _userlist.FirstOrDefault(p => p.Userid.Equals(u.Userid)&&p.Username.Equals(u.Username)); return us; } //post獲取數據 //獲取全部數據 [HttpPost] public IEnumerable<Users> GetUser() { return _userlist; } //根據id獲取單個數據 [HttpPost] public IEnumerable<Users> GetUser1([FromBody]int id) { return _userlist; } } }
視圖中的ajax
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-3.3.1.js"></script> </head> <body> get部分 <div> <input type="button" id="btn1" value="返回全部數據" /> <br /> <input type="button" id="btn2" value="返回指定數據" /> <br /> <input type="button" id="btn3" value="封裝用戶數據傳遞" /> <br /> </div> post部分 <div> <input type="button" id="btn4" value="返回全部數據" /> <br /> <input type="button" id="btn5" value="返回指定數據" /> <br /> <input type="button" id="btn6" value="封裝用戶數據傳遞" /> <br /> 用戶名:<input type="text" id="txtname" name="txtname" /> 密碼:<input type="text" id="txtpwd" name="txtpwd" /> <input type="button" value="登陸" /> </div> <script> $(function () { $("#btn1").click(function () { $.ajax({ type: 'GET', url: '/api/User/Get', dataType: 'json', success: function (res) { alert(res); } }) }) $("#btn2").click(function () { $.ajax({ type: 'GET', url: '/api/User/Get/1', dataType: 'json', success: function (res) { alert(res); } }) }) $("#btn3").click(function () { var user = { Userid: 1, Username:'jake', pwd: '123' }; $.ajax({ type: 'GET', url: '/api/User/GetModel/', dataType: 'json', data: user, success: function (res) { alert(res); } }) }) $("#btn4").click(function () { $.ajax({ type: 'POST', url: '/api/User/GetUser/', dataType: 'json', success: function (res) { alert(res); } }) }) $("#btn5").click(function () { var d = { "": "1" }; $.ajax({ type: 'POST', url: '/api/User/GetUser1/', dataType: 'json', data:d, success: function (res) { alert(res); } }) }) }) }) </script> </body> </html>