AngularJs之七

標籤：資料   服務   lan   put   方法   substr   get   lang   cat   

今天接著說angularJs服務，但今天專註說一下http服務。

一：$http 是 AngularJS 應用中最常用也是最核心的服務。 服務向伺服器發送請求，應用響應伺服器傳送過來的資料。

<div ng-app="myapp" ng-controller="mycc">    <h1>{{mylike}}</h1></div><script> var app=angular.module("myapp",[]); app.controller("mycc",function($scope,$http){     $http.get("httpservice.html").then(function (response) {                $scope.mylike = response.data;        });     })</script>

httpservice.html內容只有下面幾個字,或者是json資料格式：

最喜歡的還是刀削麵

二：AngularJS $http 是一個用於讀取web伺服器上資料的服務。
$http.get(“url”)方法擷取伺服器端資料檔案，下面是Json資料檔案迴圈輸出的執行個體。

<div ng-app="myapp" ng-controller="mycc">    <h1>{{ctitle}}</h1>  <ul>      <li ng-repeat="x in names">姓名:{{x.uname}},性別:{{x.usex}}</li>  </ul></div><script> var app=angular.module("myapp",[]); app.controller("mycc",function($scope,$http){           $http.get(“student_json.php").success(function(response){        $scope.names=response.info;            $scope.ctitle=response.ctitle;     }) })</script>

以上是html檔案代碼

{"ctitle":"人員名單","info":[{"uname":"如花姑娘","usex":"女"},{"uname":"馬金蓮","usex":"女"},{"uname":"西門大官人","usex":"男"},{"uname":"葉良辰","usex":"未知"},{"uname":"李寶褲","usex":"男"},{"uname":"藍瘦","usex":"女"},{"uname":"香菇","usex":"女"}]}

以上是php檔案代碼

三：提交資料。

<div ng-app="uapp" ng-controller="uctrl">    使用者名稱：<input type="text" ng-model="sdata.uname"><br>    密碼：<input type="text" ng-model="sdata.upwd"><br>         <input type="button" ng-click="mypost()" value="提交資料"></div>

<script language="javascript"> var app=angular.module("uapp",[]); //下面是建立jsonToStr服務，可以將json對象轉換為json字串,否則後台將接收不到資料 app.service("jsonToStr",function(){        this.transform = function(jsonData){            var string = ‘‘;            for(str in jsonData){                string = string + str +‘=‘ + jsonData[str] +‘&‘;            }            var _last = string.lastIndexOf(‘&‘);            string = string.substring(0,_last);            return string;        } })</script>

app.controller("uctrl",function($scope,$http,jsonToStr){      $scope.sdata={"uname":"huangxc","upwd":"aabbcc"};      //單擊事件方法如下     $scope.mypost=function(){        //http文法: $http({}).success(function(ret){}).error(function(){})          $http({              url:"http://127.0.0.2/angularjs/data.php"            ,method: ‘POST‘            ,data:jsonToStr.transform($scope.sdata)            , headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ },              }).success(function(ret){                 alert(ret)              }).error(function(){})        } })

 

AngularJs之七