WebApi前端調用
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<input type="button" id="btnUserlist" value="查詢用戶信息">
<div id="UsersListDiv" style="width:300px;height: 200px;border: 1px solid gray;"></div>
</body>
</html>
備注：獲取整張表的數據,使用for循環或foreach遍歷
<script>
// Ajax異步請求,查詢列表信息，因為返回的是泛型集合，直接for循環取值
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'get', //Http請求類型
url: 'https://localhost:44304/api/Values',
dataType: 'json', //服務器返回json數據類型
data: {},
success: function(data) {
var a = "";
for (var i = 0; i < data.length; i++) {
a += "," + data[i].Name;
}
$("#UsersListDiv").html("您查詢的結果為：" +a);
},
error: function() {
alert("請求失敗！");
},
complete: function() {
alert("回調");
}
});
});
});
</script>
獲取單條數據：在data里面傳參，不需要遍歷，直接通過data.Name來取值
<script>
// Ajax異步請求，查詢單條信息，直接在data中傳參，取值直接使用data.Name取值
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'get', //Http請求類型
url: 'https://localhost:44304/api/Values',
dataType: 'json', //服務器返回json數據類型
data: {
id: 10000
},
success: function(data) {
$("#UsersListDiv").html("您查詢的結果為：" +data.Name );
},
error: function() {
alert("請求失敗！");
},
complete: function() {
alert("回調");
}
});
});
});
</script>
<script>
// Ajax異步請求，修改數據前端代碼
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'post', //Http請求類型
url: 'https://localhost:44304/api/Values/UpdateUser/10000',
data: {
Id:10000,
Name:"周宇菲",
Age:5,
Sex:"女"
},
success: function() {
alert("修改成功");
},
error: function() {
alert("請求失敗！");
},
complete: function() {
alert("回調");
}
});
});
});
</script>
// PUT api/values/5 修改數據后台代碼
[HttpPost]
public void UpdateUser(int id, [FromBody]User value)
{
foreach (User item in UsList)
{
if (id== item.Id)
{
item.Name = value.Name;
item.Sex = value.Sex;
item.Age = value.Age;
}
}
}
前端調用解決跨域問題固定代碼：
在服務端的Web.config的 </handlers>下面添加以下固定代碼
<!--解決跨域問題-->
<httpProtocol>
<customHeaders>
<clear />
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
<add name="Access-Control-Allow-Headers" value="Content-Type,Token" />
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
備注：獲取整張表的數據,使用for循環或foreach遍歷