jQuery跨域调用Web API

 2023-09-05 阅读 405 评论 0

摘要:我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html。有朋友说开发是会开发了,但不知道怎么调用啊?那么这里我就演示一下如何进行跨域调用Web API,算是对上面博客的补充。 因为在浏览器

我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html。有朋友说开发是会开发了,但不知道怎么调用啊?那么这里我就演示一下如何进行跨域调用Web API,算是对上面博客的补充。

因为在浏览器中是不允许跨域访问Web API的(为了安全),所以必须要对我们开发的Web API添加跨域功能。在Web API中添加跨域功能非常简单,只需要引入一个包Microsoft.AspNet.WebApi.Cors即可,直接通过Nuget安装即可。

然后在WebApiConfig里面添加跨域支持代码:

EnableCorsAttribute的构造函数指定的三个参数均为*,表示支持所有的访问。第一个参数表示访问的源;第二个参数表示访问的头信息;第三个参数表示允许的方法,比如:HEAD、OPTIONS、DELETE、GET、POST等等。

最后将Web API项目编译发布到IIS,然后就可以通过jQuery调用Web API。

完整的HTML调用Web API的代码如下:

<html>
<head><script src="jquery-1.4.2.js"></script><script type="text/javascript">$(function(){$.ajax({type:'get',async: false,url:'http://10.77.137.120:9876/Api/IPAddress',dataType:'JSON',data:{}, success:function(result){var json = JSON.parse(result);for(var i = 0;i<json.length;i++){$("#citys").append("<tr><td>"+(parseInt(i)+1)+"</td><td>"+json[i].IPAddress+"</td><td>"+json[i].Province+"</td><td>"+json[i].City+"</td></tr>");}}});});</script>
</head>
<body><table id="citys" cellspacing=0 cellpadding=0 border=1><thead><th>序号</th><th>IP</th><th>省份</th><th>地市</th></thead></table>
</body>
</html>

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/1/552.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息