JQuery调用Web API

最新推荐文章于 2023-06-29 09:34:01 发布

曹振华

最新推荐文章于 2023-06-29 09:34:01 发布

阅读量2.2k

点赞数

分类专栏： c# web 文章标签： C# Web API JQuery

本文链接：https://blog.csdn.net/chadcao/article/details/38707805

版权

c# web 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

1）上一章我们学习了如何用VS2012编写Web API

2）这一章我们学习如何用JQuery调用Web API 代码如下

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title><script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>  
    <script type="text/javascript">
        $(function () {
            $('#btnAdd').click(function () {//ADD  
                var student = {};
                student.stuName = 'chad.cao';
                student.stuAddress = 'zhejiang';
                $.ajax({
                    type: 'POST',
                    url: '/api/StudentValue/AddStudent',
                    data: student,
                    success: function (data) {
                        alert(JSON.stringify(data));
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });
            });
            $('#btnUpdate').click(function () {//UPDATE  
                var student = {};
                student.stuName = 'chad.cao111';
                student.stuAddress = 'zhejiang111';
                $.ajax({
                    type: 'PUT',
                    url: '/api/StudentValue/UpdateStudent/1',
                    data: student,
                    success: function (data) {
                        alert(JSON.stringify(data));
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });
            });
            $('#btnDelete').click(function () {//DELETE  
                $.ajax({
                    type: 'DELETE',
                    url: '/api/StudentValue/DeleteStudent/22',
                    success: function (data) {
                        alert(data);
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });
            });
            $('#btnGetOne').click(function () {//Get One  
                $.ajax({
                    type: 'GET',
                    url: '/api/StudentValue/GetStudentById/' + 1,
                    success: function (data) {
                        alert(JSON.stringify(data));
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });
            });
            $('#btnGetSearch').click(function () {//Search  
                var name = 'chad';
                var address = '';
                $.ajax({
                    type: 'GET',
                    url: '/api/StudentValue/GetStudents?stuName=' + name + '&stuAddress=' + address,
                    success: function (data) {
                        alert(JSON.stringify(data));
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });
            });
        });
    </script>   
</head>  
<body>  
    <div>  
        <table>  
            <tr>  
                <td>  
                    <input id="btnAdd" type="button" value="add" /></td>  
                <td>  
                    <input id="btnUpdate" type="button" value="update" /></td>  
                <td>  
                    <input id="btnDelete" type="button" value="delete" /></td>  
                <td>  
                    <input id="btnGetOne" type="button" value="get" /></td>  
                <td>  
                    <input id="btnGetSearch" type="button" value="search" /></td>  
            </tr>  
        </table>  
    </div>  
</body>  
</html>