码迷,mamicode.com
首页 > Windows程序 > 详细

WebApi的前端及后端调用

时间:2020-07-05 23:19:19      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:服务端   script   ==   inpu   用户   cli   void   html   泛型   

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遍历

WebApi的前端及后端调用

标签:服务端   script   ==   inpu   用户   cli   void   html   泛型   

原文地址:https://www.cnblogs.com/ypyp123/p/13252079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!