jQuery跨域调用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>
jQuery跨域调用Web API的更多相关文章
- 以短链服务为例，探讨免AppKey、免认证、Ajax跨域调用新浪微博API
新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...
- jQuery跨域调用WebService
jQuery跨域调用WebService举例html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- jquery跨域调用wcf
使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- Dynamics CRM中跨域调用Web API 2
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复224或者20160611可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- Jquery跨域调用
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
- MUI 跨域请求web api
由于刚接触MUI框架,所以在跨域问题上花了一点时间.希望我的方式能帮你少走点弯路(大神就直接过里吧)! 首先,遇到这个问题,各种百度.其中说法最多的是将mui,js文件里的 setHeader('X- ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- Jquery跨域调用后台方法
//前端JS function CallHandlerByJquery() { var url = "http://" + window.location.hostname + & ...
随机推荐
- Go 语言环境搭建
本文内容 概述 Go SDK LiteIDE 参考资料 2009年Google推出了它的第二个开源语言 Go.对 Go 的评价褒贬不一,中国比国外的热情高.Go 天生就是为并发和网络而生的,除了这点外 ...
- Android中将十六进制 颜色代码 转换为int类型数值
Android中 将 十六进制 颜色代码 转换为 int 类型数值 方法 : Color.parseColor("#00CCFF") 返回 int 数值 来自为知笔记(Wi ...
- 微软BI 之SSAS 系列 - 多维数据集维度用法之二 事实维度(退化维度 Degenerate Dimension)
这篇文章是基于上一篇 SSAS 系列 - 多维数据集维度用法之一 引用维度 Referenced Dimension 继续讲解多维数据集维度用法中的事实维度. 事实维度,顾名思义就是把事实表 Fact ...
- 设置nginx和php-fpm更改上传文件大小限制
Nginx和php默认不支持上传过大的文件.假如我们要求上传的文件大小为20M,默认配置就不允许上传了. 下面我们更改nginx和php配置,设定上传的限制为20M. Nginx配置更改 如果上传文件 ...
- grep 多行 正则匹配
https://stackoverflow.com/questions/2686147/how-to-find-patterns-across-multiple-lines-using-grep I ...
- 周期同步位置模式(CSP)，轮廓位置模式(PPM)，位置模式(PM)
什么是运动控制? 运动控制就是通过机械传动装置对运动部件的位置.速度进行实时的控制管理,使运动部件按照预期的轨迹和规定的运动参数(如速度.加速度参数等)完成相应的动作. 运动控制系统的典型构成 1. ...
- mariadb multi-source replication(mariadb多主复制)
下文一起来看看mariadb multi-source replication(mariadb多主复制)例子,希望对各位有帮助. mariadb multi-source replication( ...
- C#通过DSOFile读取与修改文件的属性
搜了一圈用C#读取与修改文件属性的文章,结果几乎找不到- -: 偶然间看到一个DSOFile工具,然后找到了对该工具进行详细讲解的一篇文章:<DSOfile,一个修改windows系统文件摘要的 ...
- C#中回滚TransactionScope的使用方法和原理
TransactionScope只要一个操作失败,它会自动回滚,Complete表示事务完成 实事上,一个错误的理解就是Complete()方法是提交事务的,这是错误的,事实上,它的作用的表示本事 ...
- MapReduce实现矩阵乘法
简单回想一下矩阵乘法: 矩阵乘法要求左矩阵的列数与右矩阵的行数相等.m×n的矩阵A,与n×p的矩阵B相乘,结果为m×p的矩阵C.具体内容能够查看:矩阵乘法. 为了方便描写叙述,先进行如果: 矩阵A的行 ...