AngularJSとバックエンドphpのデータインタラクション
簡単な説明:AngularJSは2009年に誕生し、Misko Heveryらによって創設され、Googleに買収された.優れたフロントエンドJSフレームワークで、すでにGoogleの複数の製品に使用されています.AngularJSには多くの特性があり、最も核心的なのはMVC、モジュール化、自動化双方向データバインド、意味化ラベル、依存注入などである.クラスライブラリだけでなく、完全なフレームワークを提供します.複数のクラスライブラリとのインタラクションを回避し、複数のインタフェースの煩雑な作業を熟知する必要があります.Google Chromeの開発者が設計し、次世代のWebアプリケーション開発をリードしています.5年か10年後にはAngularJSは使わないかもしれませんが、そのデザインの真髄はずっと使われています.
問題とシナリオ:フロントエンドフレームワークである以上、バックグラウンドのデータとのインタラクションは避けられない.PHPデータとのインタラクションのポイントについて説明します.
AngularJSの$httpは、POSTを使用しているかPUTを使用しているかにかかわらず、デフォルトの送信および要求データフォーマットはjsonです.これは、送信されたhttpリクエストヘッダから見ることができます.Content-Type:application/json;charset=UTF-8.PHPのGETまたはPOSTが受信したhttpリクエストデータはContent-Type:アプリケーション/x-www-form-urlencoded;charset=UTF-8.
だから初心者はAngularJSを使う時にこの問題に直面して、明らかに送ってきたのに、どうして私はデータを受け取ることができませんか?この問題を解決するには、2つの側面から着手することができます.
一、PHPの中にあります.
これで気づきます.$dataはjsonデータで、PHPではこのデータを他の処理ができます.
二、Angularでhttpリクエストを再構築する.
appを構築するときに$httpを直接書き換え、私たちがよく使うリクエスト方式に変換します.これで普通のajaxリクエストのようになりました.
問題とシナリオ:フロントエンドフレームワークである以上、バックグラウンドのデータとのインタラクションは避けられない.PHPデータとのインタラクションのポイントについて説明します.
AngularJSの$httpは、POSTを使用しているかPUTを使用しているかにかかわらず、デフォルトの送信および要求データフォーマットはjsonです.これは、送信されたhttpリクエストヘッダから見ることができます.Content-Type:application/json;charset=UTF-8.PHPのGETまたはPOSTが受信したhttpリクエストデータはContent-Type:アプリケーション/x-www-form-urlencoded;charset=UTF-8.
だから初心者はAngularJSを使う時にこの問題に直面して、明らかに送ってきたのに、どうして私はデータを受け取ることができませんか?この問題を解決するには、2つの側面から着手することができます.
一、PHPの中にあります.
$data = file_get_contents("php://input");
echo $data;
これで気づきます.$dataはjsonデータで、PHPではこのデータを他の処理ができます.
二、Angularでhttpリクエストを再構築する.
var ws = angular.module("app",[function ($httpProvider) {
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
$httpProvider.defaults.headers.put['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を構築するときに$httpを直接書き換え、私たちがよく使うリクエスト方式に変換します.これで普通のajaxリクエストのようになりました.