标签：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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。