如何使用AngularJS做XMLHttpRequest（AJAX）

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图在POST请求中使用AngularJS，但在事件中我不能使用$scope。如何使用AngularJS做XMLHttpRequest（AJAX）

那是我的代码（用于演示目的，我只是折角结构中添加状态）：

myApp.controller('myController', function myController($scope) { 
    $scope.myVal = [{status:"before (working)"}]; 
    doRequest(p1, p2, myCallback.bind(null, $scope)); 
    function myCallback($scope, a) { 
     $scope.myVal = [{ status: a }]; 
    } 
    function doRequest(p1, p2, callback) { 
     $scope.myVal = [{ status: "prepare request (working)" }]; 
     var xhr = new XMLHttpRequest(); 
     var url = "http://..."; 
     xhr.open("POST", url, true); 
     //.... 
     xhr.send(myQuery); 
     $scope.myVal = [{ status: "after post send (working)" }]; 
     callback("after post via callback (working)"); 
     //callback working till this point 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState === 4 && xhr.status === 200) { 
       callback("in event (NOT working)"); 
       //This is NOT working anymore (even this point is reached)! 
      } 
     }; 
    }

通过注释在代码中添加，回调的工作，直到事件处理程序分配。

我在找的是：如何使用回调（或更精确的如何使$scope可用/传输的事件处理函数）？

回答：

您不需要将$scope转换为callback，原因$scope定义在控制器范围内。

您在使用“原生”Ajax时可能会遇到问题，导致此操作在Angular之外并且角度不知道，因此您需要熟悉Angular与$scope.$apply。

如果您需要制作快捷方式，Angular会为您提供$http服务。

您可以更换整个XMLHttpRequest与注射$ http和调用.post方法：

myApp.controller('myController', function myController($scope, $http) { 
    $scope.myVal = [{status:"before (working)"}]; 
    doRequest(p1, p2); 
    function doRequest(p1, p2) { 
     $scope.myVal = [{ status: "prepare request (working)" }]; 
     $http.post(url, myQuery).then(() => { 
      $scope.myVal = [{ status: 'Finished' }]; // $scope is available here 
     }); 
    } 
}

以上是 如何使用AngularJS做XMLHttpRequest（AJAX） 的全部内容， 来源链接： utcz.com/qa/257852.html

回到顶部