Angular 和 jQuery Ajax 请求

Question

我在使用 Angular 和 jQuery 时遇到了一些问题，它们在 WebServlet 中静态地对 api 进行了 http 调用。我想使用 ng-show 在 HTML 页面中打印请求结果，但是我不能- 这是我的控制器：

var myApp = angular.module('spicyApp1', []);
myApp.controller('SpicyController', ['$scope', function($scope) {
    $scope.chiliSpicy = function() {
    var url = "http://localhost:8080/RESTnt/";
    var user = "admin";
    var pwd = "password";
    $.ajax({
        type: 'GET',
        url: url + 'login?username='+user+'&password='+pwd,
        dataType: 'xml',
        success: function(data)
            {
                $scope.result = true;
            },
        error: function (data) 
            {
                $scope.result = false;
            },
        async:true
        });
    };
}])

这是我的 html

<html>

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


</head>
<body ng-app="spicyApp1">
<div ng-controller="SpicyController">
 <button ng-click="chiliSpicy()">Chili</button>
 <p>The food is {{spice}} spicy!</p>
 <p ng-show="result===200" class="alert alert-warning">Your guess is higher.</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script src="ajaxQuery.js"></script>
</body>
</html>

Answer 1

您应该避免混合使用 jQuery 方法和 AngularJS 方法。 Angular 有自己的 ajax 服务，名为 $http，您可以使用它：

myApp.controller('SpicyController', ['$scope', '$http', function($scope, $http) {
    $http.get(url + 'login?username='+user+'&password='+pwd).success(function(data) {
        $scope.result = true;
    })
}

如果您坚持使用 jQuery ajax，您可以通过向响应回调添加 $scope.$apply() 来实现：

    success: function(data)
        {
            $scope.result = true;
            $scope.$apply();
        },
    error: function (data) 
        {
            $scope.result = false;
            $scope.$apply();
        },

这需要告诉 angular 范围已更改，并且运行 digest cycle 将检查 HTML DOM 的更改.

Answer 2

里面ajax调用成功，写入如下代码：

$scope.$apply(function () {
    $scope.result = true;
});`

Angular 和 jQuery Ajax 请求

Angular and jQuery Ajax Request

jquery

xmlhttprequest

angularjs