AngularJS + PHP. Заставляем $http-сервис веcти себя как jQuery.ajax()

Новички в Ангуляре часто путаются из-за того, что быстрые функции $http-сервиса (напр., $http.post()) не взаимозаменяемы с эквивалентными функциями Джиквери (напр., jQuery.post()), не смотря на то, что соответствующие руководства описывают их использование схожим образом. То есть, если код в Джиквери до этого имел вид:

(function($)
{
  jQuery.post('/endpoint', { foo: 'bar' }).success(function(response)
  {
    // ...
  });
})(jQuery);

То можно обнаружить, что следующий точно такой же не работает из коробки в Ангуляре:

var MainCtrl = function($scope, $http)
{
  $http.post('/endpoint', { foo: 'bar' }).success(function(response)
  {
    // ...
  });
};

Проблема, с которой можно столкнуться, в том, что сервер не может получить параметры { foo: 'bar' } из запроса Ангуляра.

Различие в том, как Джиквери и Ангуляр сериализуют и передают данные. В основном, проблема заключается в языке, на котором написана серверная часть и который просто не понимает передачу Ангуляра с настройками по-умолчанию — чертовски обидно, потому что Ангуляр, конечно, не делает ничего плохого. По умолчанию, Джиквери передает данные с использованием Content-Type: x-www-form-urlencoded и привычной строки foo=bar&baz=moe. Ангуляр, однако, передает данные с использованием Content-Type: application/json и { "foo": "bar", "baz": "moe" } строки JSON, которую, к сожалению, некоторые серверные языки — особенно РНР — изначально не преобразуют в объект.

К счастью, разработчики Ангуляра позаботились о поддержке такого метода $http-сервисом, чтобы установить x-www-form-urlencoded для всех наших передач. Существует множество решений, предлагаемых на форумах и StackOverflow, но они не идеальны, поскольку требуют либо изменить код сервера, либо схему использования $http. Поэтому представляю вам наилучшее возможное решение, которое не требует изменений ни серверного, ни клиентского кода, а предлагает внести некоторые незначительные изменения в работу $http в настройках модуля приложения:

// Корневой модуль приложения ...
angular.module('MyModule', [], function($httpProvider)
{
  // Используем x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
 
  // Переопределяем дефолтный transformRequest в $http-сервисе
  $httpProvider.defaults.transformRequest = [function(data)
  {
    /**
     * рабочая лошадка; преобразует объект в x-www-form-urlencoded строку.
     * @param {Object} obj
     * @return {String}
     */ 
    var param = function(obj)
    {
      var query = '';
      var name, value, fullSubName, 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;
    };
    
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

Примечание: Большой фрагмент выше необходимо всегда использовать с указанием функции param(). НЕ используйте вместо этого jQuery.param(); что вызовет хаос, когда попытаетесь воспользоваться $resource Ангуляра, поскольку jQuery.param() будет отклонять каждый, переданный ему, метод класса $resource! (Это особенность JQuery из-за которой свойства объекта для параметризации, содержащие функции, вызываются и возвращаемое ими значение используется в качестве параметризованного, но в случае с Ангуляром это может быть губительно, так как мы обычно передаем «реальные» экземпляры объектов с методами и т.д.)

Просто используйте приведенный выше фрагмент и всё будет в порядке!

Теперь можно двигаться дальше, используя $http.post() и другие подобные методы, предполагая, что существующий серверный код ожидает x-www-form-urlencoded данные. Вот несколько примеров конечного результата для обыденного, законченного кода (пример того, на что вы надеялись и мечтали):

HTML-шаблон

<div ng-app="MyModule" ng-controller="MainCtrl">
  <p ng-show="loading">Loading...</p>
  <p ng-hide="loading">Response: {{response}}</p>
</div>

Клиентский код (AngularJS)

var MainCtrl = function($scope, $http)
{
  $scope.loading = true;
  $http.post('/endpoint', { foo: 'bar' }).success(function(response)
  {
    $scope.response = response;
    $scope.loading = false;
  });
};

Серверный код (PHP)

< ?
header('Content-Type: application/json');
 
// Та-дам! $_POST теперь нормальный; PHP без проблем
// преобразует запросы Ангуляра в объекты
echo json_encode($_POST);
?>

Другие примечания
Напрашивается вопрос, можно ли всё-таки в PHP прочитать JSON-запрос Ангуляра? Ну, конечно, если читать входной поток PHP и декодировать JSON:

< ?
$params = json_decode(file_get_contents('php://input'));

// или так, если нужно преобразовать в PHP массив (прим. переводчика)
$params = json_decode(trim(file_get_contents('php://input')), true);
?>

Очевидный недостаток в том, что код немного менее интуитивен (мы привыкли к $_POST, в конце концов), и если серверные обработчики уже написаны с использованием $_POST, то придется переписывать серверный код. Если используется хороший фреймворк, вероятно, можно осуществить глобальные изменения, так, чтобы обработчик входа прозрачно определял JSON запросы, но я отвлекся.

Автор: tamtakoe

Источник