ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

WebApi的前端及后端调用

2020-07-05 22:05:55  阅读:33  来源: 互联网

标签:WebApi function 调用 Name json alert 及后 var data


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异步请求
$(function(){
$("#btnUserlist").click(function(){
$.ajax({
type:'get',//Http请求类型
url:'https://localhost:44304/api/Values',
// url:'https://localhost:44304/api/values/DeleteUser?id=10000',
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异步请求
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'get', //Http请求类型
url: 'https://localhost:44304/api/Values',
dataType: 'json', //服务器返回json数据类型
data: {
id: 10000
},
success: function(data) {
// var a = "";
// for (var i = 0; i < data.length; i++) {

// a += "," + data[i].Name;
// }
$("#UsersListDiv").html("您查询的结果为:" +data.Name );
},
error: function() {
alert("请求失败!");
},
complete: function() {
alert("回调");
}
});
});
});
</script>

前端调用解决跨域问题固定代码:

在服务端的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,function,调用,Name,json,alert,及后,var,data
来源: https://www.cnblogs.com/ypyp123/p/13252079.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有