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 "};