angularJS中jsonp跨域的使用实例

一.工程结构

　　其实是一个纯前端的工程，完全不用tomcat方式部署，但为了部署到tomcat容器上去，就这样简单放到web工程里

 

二.代码

test.html

<!DOCTYPE html>  
<html lang="zh-CN" ng-app="App">  
<head>  
    <meta charset="UTF-8">  
    <title>天气查询</title>  
    <link rel="stylesheet" href="bootstrap.css"/>  
</head>  
<body>  
    <div class="container" ng-controller="IndexCtrl">  
        <h1 class="text-center text-danger">Angular跨域天气查询示例</h1>  
  
        <div class="form-horizontal">  
            <div class="form-group">  
                <label class="col-md-2 control-label">  
                        城市
                </label>  
                <div class="col-md-10">
                    <input ng-model="cityName">  
                </div>  
            </div>  
            <div class="form-group">  
                <div class="col-md-offset-2 col-md-10">  
                    <button type="submit" class="btn btn-primary btn-sm" ng-click="submit()">  
                                                                                     提交
                    </button>  
                </div>  
            </div>  
        </div>
        <ul>  
            <li ng-repeat="item in weather">  
                {{item.ref}}  
                </li>  
        </ul>
    </div> 
    <script src="jquery-1.8.3.js"></script>
    <script src="bootstrap.js"></script>  
    <script src="angular1.2.9.js"></script>
    <script src="angular-strap2.3.12.js"></script>  
    <script src="angular-strap.tpl2.3.12.js"></script>
    <script src="app.js"></script>  
    <script src="controllers.js"></script>  
</body>
</html>

controllers.js

var AppControllers = angular.module('App.controllers', ['mgcrea.ngStrap']);  
  
AppControllers.controller('IndexCtrl', ['$scope', '$modal', '$http', function ($scope, $modal, $http) {
    
    $scope.submit = function () {  
        var cityName = $scope.cityName || {};  
            $http({
                method: 'JSONP',
                url: 'http://toy1.weather.com.cn/search?cityname=' + cityName + '&callback=JSON_CALLBACK'
            }).success(function (msg) {
                console.log(msg);
                $scope.weather = msg;
            });
    };  
}]);

　　这里的url是公网的一个服务接口，http://toy1.weather.com.cn/search?cityname=%E6%B9%96%E5%8D%97%E7%9C%81所示，其中cityname是入参。

app.js

var App = angular.module('App', ['mgcrea.ngStrap', 'App.controllers']);  
console.log(App);

 

三.打成war包

　　点"Finish"在桌面生成select.war包。　

 

四.部署生成的select.war包

　　10.107.98.46:8089通过jsonp成功访问了toy1.weather.com.cn，并获得返回的结果，即成功通过jsonp方式实现了跨域。

posted on 2019-01-20 17:08  bijian1013  阅读(286)  评论(0)    收藏  举报

导航