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>