AngularJS AJAX - $http

$http అనేది విద్యుత్తుగా డాటాను దూరస్థ సర్వర్ నుండి పదించే AngularJS యొక్క సేవ

AngularJS $http

AngularJS $http సేవ సర్వర్కుకు అనురోధాన్ని పంపించి ప్రతిస్పందనను తిరిగి పొందుతుంది.

实例

సర్వర్కు నుండి ఒక సాధారణ అనురోధాన్ని పంపించి శీర్షికలో ఫలితాన్ని ప్రదర్శించండి:

<div ng-app="myApp" ng-controller="myCtrl">
<p>నేడు స్వాగత సందేశం ఉంది:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.myWelcome = response.data;
  });
});

亲自试一试

పద్ధతి

పైని ఉదాహరణ లో ఉపయోగించబడింది $http సేవ .get పద్ధతి.

.get పద్ధతి $http సేవను కించిపట్టడానికి ఉపయోగించే సులభమైన మార్గం. క్రింది సులభమైన మార్గాలు ఉన్నాయి:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

పైని పద్ధతులను అన్నింటినీ $http సేవను కించిపట్టడానికి ఉపయోగించే సులభమైన మార్గాలు

实例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
      url : "welcome.htm"
  }).then(function mySuccess(response) {
    $scope.myWelcome = response.data;
  }, function myError(response) {
    $scope.myWelcome = response.statusText;
  });
});

亲自试一试

పైని ఉదాహరణ ఒక ఆబ్జెక్ట్ ను పరామితిగా వాడింది. దానిలో HTTP పద్ధతి, URL, విజయవంతంగా జరగబోయే కార్యకలాపం మరియు వైఫల్యం జరగబోయే కార్యకలాపం నిర్దేశించబడింది.

అంశం

సేవికర్త నుండి ప్రతిస్పందన కలిగిన ఆబ్జెక్ట్ కలిగి క్రింది అంశాలు ఉన్నాయి:

• .config అనురోధాలను తయారు చేయడానికి ఉపయోగించే ఆబ్జెక్ట్
• .data సేవికర్త నుండి ప్రతిస్పందనలను తీసుకొనే స్ట్రింగ్ లేదా ఆబ్జెక్ట్
• .headers 用于获取标头信息的函数
• .status 定义 HTTP 状态的数字
• .statusText 定义 HTTP 状态的字符串

实例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.content = response.data;
    $scope.statuscode = response.status;
    $scope.statustext = response.statusText;
  });
});

亲自试一试

要处理错误，请向 .then 方法添加一个函数：

实例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // First function handles success
    $scope.content = response.data;
  }, function(response) {
    // Second function handles error
    $scope.content = "Something went wrong";
  });
});

亲自试一试

JSON

从响应中获取的数据应为 JSON 格式。

JSON 是传输数据的绝佳方式，并且很容易在 AngularJS 或任何其他 JavaScript 中使用。

举例：我们在服务器上有一个文件，该文件返回一个包含 15 个客户的 JSON 对象，所有这些都被包装在一个名为 records 的数组中。

请点击此处查看 JSON 对象。

实例

The ng-repeat directive is perfect for looping through an array:

<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function(response) {
    $scope.myData = response.data.records;
  });
});

亲自试一试

应用程序说明：

该应用程序定义了 customersCtrl 控制器，具有 scope 和 http 对象。

$http 是一个 XMLHttpRequest 对象బాహ్య డాటా అభ్యర్ధన కోసం ఉపయోగించబడుతుంది.

$http.get() https://www.codew3c.com/angular/customers.php నుండి పఠించబడింది జెఐఎస్ డాటా。

విజయవంతంగా అయిన తర్వాత, కంట్రోలర్ స్కోప్ లో ఒక అంశాన్ని సృష్టిస్తుంది మైడాటాఅందులో సర్వర్ నుండి జెఐఎస్ డాటా ఉంది.