AngularJs之七

Posted 2020-08-26 @新时代的码砖工

今天接着说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(){})
    
    }
 })