我曾经发表了一篇关于如何开发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>

jQuery跨域调用Web API的更多相关文章

  1. 以短链服务为例，探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  2. jQuery跨域调用WebService

    jQuery跨域调用WebService举例html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  3. jquery跨域调用wcf

    使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...

  4. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  5. Dynamics CRM中跨域调用Web API 2

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复224或者20160611可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  6. Jquery跨域调用

    今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  7. MUI 跨域请求web api

    由于刚接触MUI框架,所以在跨域问题上花了一点时间.希望我的方式能帮你少走点弯路(大神就直接过里吧)! 首先,遇到这个问题,各种百度.其中说法最多的是将mui,js文件里的 setHeader('X- ...

  8. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  9. Jquery跨域调用后台方法

    //前端JS function CallHandlerByJquery() { var url = "http://" + window.location.hostname + & ...

随机推荐

  1. VS2013中Python学习笔记[环境搭建]

    前言 Python是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色 ...

  2. leetcode344 反转字符串 c++实现

    编写一个函数,其作用是将输入的字符串反转过来. 示例 1: 输入: "hello" 输出: "olleh" 示例 2: 输入: "A man, a p ...

  3. 【Qt5】Windows下配置程序的产品、公司、版权、版本号等详细信息

    在工程的pro文件中加入下面的配置 # 配置图标(仅Windows有效)# 本程序使用两个图标,这样其快捷方式可以有更多选择,也可以给关联文件提供图标选择RC_ICONS += icon1.ico \ ...

  4. FPGA系列之一：Cyclone V中的时钟资源

    之前的项目中更多的是有师兄提供经验和帮助,追求的是快速上手,所以不管对于硬件电路设计,还是verilog电路编程,甚至是FPGA内部的资源,都没来得及系统地学习,最近在做算法到电路的实现,正好系统学习 ...

  5. 《Unix&Linux大学教程》学习笔记七：进程与作业控制

    1:进程:一个内存中的程序+程序所需数据+管理程序的各种状态信息. 2:进程由内核进行管理,内核使用调度器,给予进程一个时间片来运行,然后切换到下一个进程. 3:进程分叉 fork :创建一个子进程 ...

  6. ios面试心得

    第一部分:面试题   注意,下面这些题只是我准备的题库.在实际面试的时候我会根据面试者的水平抽出相应的题目来出的. 技术 基础   为什么说Objective-C是一门动态的语言? 讲一下MVC和MV ...

  7. NeoFinder for Mac（增强型文件管理工具）破解版安装

    1.软件简介    NeoFinder 是 macOS 系统上一款帮助用户管理磁盘的 Mac 工具,NeoFinder for mac 能迅速组织您的数据,无论是在外部或内部磁盘,或任何其他卷.它能记 ...

  8. 分析各种Android设备屏幕分辨率与适配 - 使用大量真实安卓设备采集真实数据统计

    一. 数据采集 源码GitHub地址 : -- SSH : git@github.com:han1202012/DisplayTest.git; -- HTTP : https://github.co ...

  9. 微信小程序-开心大转盘（圆盘指针）代码分析

    大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图:     界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没 ...

  10. Android Launcher分析和修改7——AllApp全部应用列表(AppsCustomizeTabHost)

    今天主要是分析一下Launcher里面的所有应用列表.Android4.0 Launcher的所有应用列表跟2.X比较大的区别就是多了Widget的显示.下面会详细分析Launcher里面有关所有应用 ...