AngularJSとバックエンドphpのデータインタラクション

4759 ワード

簡単な説明: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 = 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リクエストのようになりました.