WEBAPI獲取數據

在大學學期期間學習的從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>
相關文章
相關標籤/搜索