AngularJS AJAX - $http
- الصفحة السابقة خدمات AngularJS
- الصفحة التالية جداول AngularJS
$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; }); }); </script>
الطريقة
استخدم المثال السابق $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. يحدد الكائن طريقة HTTP، URL، والعمل الذي سيتم تنفيذه بنجاح، والعمل الذي سيتم تنفيذه في حالة الفشل.
الخاصية
الاستجابة من الخادم هي كائن يحتوي على الخاصيات التالية:
.config
الكائن المستخدم لإنشاء الطلب.data
السلسلة أو الكائن، تحمل الاستجابة من الخادم.headers
The function used to obtain header information.status
Define the number of HTTP status.statusText
Define the string of HTTP status
例子
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; }); });
To handle errors, please send to .then
The method adds a function:
例子
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
The data obtained from the response should be in JSON format.
JSON is an excellent way to transmit data and is easy to use in AngularJS or any other JavaScript.
For example, we have a file on the server that returns a JSON object containing 15 customers, all of which are wrapped in a name called records
in the array.
Please click here to view the JSON object.
例子
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; }); }); </script>
شرح التطبيق:
يحدد التطبيق customersCtrl
مستخدمي التحكم، الذين يحتويون على نطاق
و http
مثل.
$http
هو مثل XMLHttpRequest، لطلب البيانات الخارجية.
$http.get()
قراءة من https://www.codew3c.com/angular/customers.php بيانات JSON.
بعد النجاح، يتم إنشاء خاصية في نطاق التحكم myData
، التي تحتوي على بيانات JSON من الخادم.
- الصفحة السابقة خدمات AngularJS
- الصفحة التالية جداول AngularJS