【angularjs】$http學習記錄

時間 2019-12-06

標籤 angularjs http 學習記錄欄目 AngularJS 简体版

原文原文鏈接

火狐的網址能夠直接寫文件的地址如：D:\studyprogram\wamp\www\http.htmlphp

其餘的要改爲服務器下的地址如 http://localhost\http.htmlhtml

http請求要在服務器環境下運行angularjs

廢棄聲明 (v1.5)json

v1.5 中$http 的 success 和 error 方法已廢棄。使用 then 方法替代。增長返回參數的data屬性服務器

以前寫法：app

    $http.get('weibo.php', {
            params: {act: 'get_page_count'}
        }).success(function (json){
            setCur(json.count);
        }).error(function (){
            alert('錯誤');
        });

1.6寫法：jsonp

        $http.get('weibo.php', {
            params: {act: 'get_page_count'}
        }).then(function (json){
            setCur(json.data.count);
        },function (){
            alert('錯誤');
        });

如下代碼 angularjs 版本1.6.4google

1.txturl

{ "sites": [ { "Name": "菜鳥教程", "Url": "www.runoob.com", "Country": "CN" }, { "Name": "Google", "Url": "www.google.com", "Country": "USA" }, { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" } ] }

$http通用spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="angular.min.js"></script>
 6 </head>
 7 <body>
 8 
 9 <div ng-app="myApp" ng-controller="contl"> 
10 
11 <ul>
12   <li ng-repeat="x in names">
13     {{ x.Name + ', ' + x.Country }}
14   </li>
15 </ul>
16 
17 </div>
18 
19 <script>
20 var app = angular.module('myApp', []);
21     
22 app.controller('contl', function($scope, $http) {
23     $http({
24          method: 'GET',
25          url:"1.txt"
26     }).then(function success(response) {
27             $scope.names = response.data.sites;
28         },function (response) {
29             //失敗了執行
30         });
31 });
32     </script>
33 
34 </body>
35 </html>

get簡寫

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="angular.min.js"></script>
 6 </head>
 7 <body>
 8 
 9 <div ng-app="myApp" ng-controller="contl"> 
10 
11 <ul>
12   <li ng-repeat="x in names">
13     {{ x.Name + ', ' + x.Country }}
14   </li>
15 </ul>
16 
17 </div>
18 
19 <script>
20 var app = angular.module('myApp', []);
21     
22 app.controller('contl', function($scope, $http) {
23     $http.get("1.txt",).then(function (response) {
24             $scope.names = response.data.sites;
25         },function (response) {
26             //失敗了執行
27         });
28 });
29     </script>
30 
31 </body>
32 </html>

a.php

1 <?php
2 echo $_GET['a']+$_GET['b'];
3 ?>

帶參數的

 1 <!doctype html>
 2 <html ng-app="test">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 var app=angular.module('test', []);
 9 
10 app.controller('cont1', function ($scope, $http){
11     $http.get('a.php', {
12         params: {a: 12, b: 5}
13     }).then(function (response){
14         alert(response.data);
15     }, function (){
16         alert('失敗了');
17     });
18 });
19 </script>
20 </head>
21 
22 <body ng-controller="cont1">
23 </body>
24 </html>

$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})

您還能夠在其中指定默認的回調參數名稱。最初設置爲。$http.defaults.jsonpCallbackParam'callback'

不能再使用JSON_CALLBACK字符串做爲佔位符來指定回調參數值應該在哪裏。

沒有找到好的相關例子。。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。