Angular和jQuery Ajax請求

我對Angular和jQuery有一些問題，在WebServlet中對api進行http調用。我想在HTML頁面請求與NG-顯示打印結果，但是，我不能 - 這是我的控制器：Angular和jQuery Ajax請求

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>

來源

2015-06-21 Ruslan

你爲什麼不使用角的方式做'使用ajax'調用[$ HTTP]（https://docs.angularjs.org/api/ng/service/$ http） –

你能提供比「我不能」更多的細節嗎？另外，由於您使用的是jQuery，因此angular並不知道「成功」和「錯誤」回調函數，因此摘要循環不會隨後運行。（即，在您更改頁面上的其他內容之前，更改不會顯示） – Stryner

您應該避免混合使用jQuery方法和AngularJS方法。角有一個名爲$http自己的AJAX的服務，您可以使用：

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(); 
     },

這需要告訴角度範圍已被更改並運行digest cycle，它將檢查HTML DOM的變化。

來源

2015-06-21 16:22:08 Numyx

感謝您的幫助和解釋！你是最好的：D – Ruslan

裏面Ajax調用成功，寫了下面的代碼：

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

來源

2016-05-02 11:53:28 pavithra

Angular和jQuery Ajax請求

回答

相關問題