Ionic前台与PHP后台间数据交互

Ionic 目录：https://blog.csdn.net/dkbnull/article/details/87937179

 

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

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

1、无法访问服务器。

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

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

 

1、无法访问服务器。

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

在我们使用 ionic serve 命令进行调试的时候，通过站点 http://localhost:8100/#/ 来访问我们的前台程序，而我们

启动Apache服务后，通过站点 http://localhost/ 来访问服务端，这里就存在跨域问题，当我们从不同的服务器（不同域名）上获取数据时，需要使用跨域HTTP请求。

在服务器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的方式。

.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; i < value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          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格式的数据。

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

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

 

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

 

举个栗子

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

$scope.login = function () {
    $http.post('http://localhost/test/user.php', {
    user: 'user'
  }).success(function (response) {
        // code
  }).error(function () {
     // code
  })
};

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

$request=json_decode($GLOBALS["HTTP_RAW_POST_DATA"]);
$user =$request->{"user "};