java angularjs 跨域访问_AngularJS使用JSONP跨域问题(后台WebApi)

这两天接到项目,项目框架是同事已经搭到的,大概看了一下,用的是AngularJS框架,表示没用过,临时看了一下文档,还好文档通俗易懂,整体不是很难,大概算是有个了解。

附上教程地址:AngularJS教程

好了,下面说正事,由于项目需求,整个项目都是调用的Api,那么问题来了,MVC WebApi也是同事搭的,但是并没有考虑到跨域问题,所有Api在一个项目里面单独存在,A项目要用js访问Api的接口,所以项目开始之前的第一个问题来了,跨域。

刚开始先用了JQuery Ajax来调用接口,OK,访问成功了,欣喜之余发现了一个小bug,就是在数据返回成功后不能及时刷新,对于我这样js入门级别的小菜鸟来说,一脸懵逼。

14cd84e63fa0

页面代码

你选择的是: {{selectedSite.city}}

编号为: {{selectedSite.cityid}}

提示信息 {{msg}}

Controller(js)代码

var MyApp = angular.module("myApp", []);

MyApp.controller('getCity', function ($scope, $http) {

$.ajax({

type: "get",

url: "http://localhost:8000/api/Account/City",

dataType: "jsonp",

data: {},

success: function (data, status) {

$scope.selectedModel = data.AppendData;

$scope.msg = data.Message;

},

error: function (e) {

},

complete: function () {

}

});

//$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")

//.success(function (response) {

// $scope.selectedModel = response.AppendData;

// $scope.msg = response.Message;

//});

});

现在就已经看到问题了吧,Ajax调用接口成功了,但是页面却没有更新数据,这就很难受了,好吧,放弃,不纠结了,还是去看看AngularJS的HTTP吧

附上PHP Ajax 跨域问题最佳解决方案

用PHP的朋友可以看看,我们继续

AngularJS实现跨域的几种方法

文档里面也介绍了,我没有犹豫,还是选择使用JSONP。

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });

// The name of the callback should be the string JSON_CALLBACK.

以上是文档介绍的方法,我试了一下,访问成功了,但是返回的数据不会,大家都知道的,使用jsonp访问api要返回指定格式的数据,这里不多说,下面配图,然后现在的问题就是,虽然访问成功了,但是返回的数据却是json类型,js报错

14cd84e63fa0

2.png

走到这里其实就已经很简单了,我去api项目里面看了一下后台的配置,发现这样访问是进不到配置的设置里面的,参数不对,我就做了一些调整

var MyApp = angular.module("myApp", []);

MyApp.controller('getCity', function ($scope, $http) {

$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")

.success(function (response) {

$scope.selectedModel = response.AppendData;

$scope.msg = response.Message;

});

});

把jsonp=...换成我在后台配置的参数

好吧,问题解决了,看到这里我想很多人想对我说一句第四音的:“卧槽!”

其实我的内心也是这样想的下面我配上MVC WebApi后台支持跨域的代码跟jsonp返回数据格式的截图:

14cd84e63fa0

3.png

这里是用AngularJs返回的,Ajax跟这个返回也是不一样的,有兴趣的可以去上面配图里面找找看。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值