ionic 学习3 前后台数据交互

       我们在开发ionic程序中,必不可少的要与服务器(后台)进行数据交互,有将数据提交服务器和从服务器获取数据的操作。

       如果我们服务器使用PHP语言进行开发,可能会遇到以下问题:

        1、无法访问服务器。

        2、服务器端使用$_POST[  ]命令无法获取前台提交的数据。

       下面我们就一一说明这些问题如何解决。

1、无法访问服务器。

       在你服务器正常运行,能够通过服务器站点正常访问,但使用ionic程序无法访问情况下,一般就是存在跨域HTTP请求问题。

       在我们使用 ionic serve 命令进行调试的时候,通过站点 http://localhost:8100/#/ 来访问我们的前台程序,而我们启动Apache服务后,通过站点 http://localhost/ 来访问服务端,这里就存在跨域问题,当我们从不同的服务器(不同域名)上获取数据时,需要使用跨域HTTP请求

       在服务器php代码头部加入以下代码用于进行跨域访问

        [php]

        header("Access-Control-Allow-Origin: *");  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");  

        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");  

2、服务器端使用$_POST[ ]命令无法获取前台提交的数据。

       AngularJS封装了一个$http服务,用来读取远程服务器中的数据。其中封装的$http.post和$http.get使用起来比较方便。

       当我们前台程序中使用$http.post向后台提交数据时,我们就会发现$_POST[  ]命令一直接收不到数据。

       这是由于AngularJS的$http服务与jQuery中的不同所导致的。

       划重点了!

        在jQuery中传输数据使用的Content-Type为application/x-www-form-urlencoded,类似url传参,而AngularJS中使用的Content-Type为application/json,是使用json序列化传参。在php中,默认识别的Content-Type是application/x-www-form-urlencoded,因此对于Content-Type为application/json格式的数据无法解析,这时候使用$_POST[  ]就会接收不到数据。

       所以我们要向服务器端能接收到数据,就要使前台ionic程序传输的数据和后台服务器接收的数据格式相同。 

       这里有两种解决方案,一个是将AngularJS的传参方式改为jQuery的方式。

[javascript]

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider)  

  $httpProvider.defaults.headers.post['Content-Type'] 'application/x-www-form-urlencoded;charset=UTF-8'  

  var param function (obj)  

    var query '', name, value, fullSubName, subName, subValue, innerObj, i;  

    for (name in obj)  

      value obj[name];     

      if (value instanceof Array)  

        for (i 0; value.length;  i)  

          subValue value[i];  

          fullSubName name   '['     ']';  

          innerObj {};  

          innerObj[fullSubName] subValue;  

          query  = param(innerObj)   '&';  

         

      else if (value instanceof Object)  

        for (subName in value)  

          subValue value[subName];  

          fullSubName name   '['   subName   ']';  

          innerObj {};  

          innerObj[fullSubName] subValue;  

          query  = param(innerObj)   '&';  

         

      else if (value !== undefined && value !== null)  

        query  = encodeURIComponent(name)   '='   encodeURIComponent(value)   '&';  

      }     

      return query.length query.substr(0, query.length 1) query;  

    }     

    $httpProvider.defaults.transformRequest [function (data)  

      return angular.isObject(data) && String(data) !== '[object File]' param(data) data;  

    }];  

   

});  

       只需将这段代码放到app.js中即可。

       另一种方式是修改服务器端代码,使php可以接收json数据(博主使用的是这种方式)。

       首先在php头部加上如下代码,使php能够接收Content-Type为application/json格式的数据。

        [php]

header("Content-Type: application/json; charset=UTF-8"); 

       然后使用$GLOBALS["HTTP_RAW_POST_DATA"]file_get_contents(“php://input”)来接收数据。

       这样我们服务器就接收到了前台传来的json格式的数据,然后服务器再对json数据进行解析就可以了。

       举个栗子

       前台ionic程序向服务器端传输数据

        [javascript]

$scope.login function ()  

   $http.post('http://localhost/test/user.php',  

   user: 'user'  

 }).success(function (response)  

       // code  

 }).error(function ()  

    // code  

 })  

};  

       后台服务器接收并解析数据

        [php]

$request=json_decode($GLOBALS["HTTP_RAW_POST_DATA"]);  

$user =$request->{"user "}; 

分享到:更多 ()

抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址