2015-04-03 114 views
0

我有一个表单,我使用angularJS http方法提交。Symfony 2 Angular JS HTTP POST

代码:

<script> 
    // define angular module/app 
    var formApp = angular.module('formApp', []); 
    // create angular controller and pass in $scope and $http 
    function formController($scope, $http) { 
     // create a blank object to hold our form information 
     // $scope will allow this to pass between controller and view 
     $scope.formData = {}; 
     // process the form 
     $scope.processForm = function() { 
      $http({ 
       method: 'POST', 
       url: 'http://localhost/angular/web/app_dev.php/testcall', 
       data: $.param($scope.formData), // pass in data as strings 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload) 
      }) 
        .success(function (data) { 
         console.log(data); 
         if (!data.success) { 
          // if not successful, bind errors to error variables 
          $scope.errorName = data.errors.name; 
          $scope.errorSuperhero = data.errors.superheroAlias; 
         } else { 
          // if successful, bind success message to message 
          $scope.message = data.message; 
          $scope.errorName = ''; 
          $scope.errorSuperhero = ''; 
         } 
        }); 
     }; 
    } 
</script> 

我的表格:

<div class="container"> 
    <div class="col-md-6 col-md-offset-3"> 

     <!-- PAGE TITLE --> 
     <div class="page-header"> 
      <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1> 
     </div> 

     <!-- SHOW ERROR/SUCCESS MESSAGES --> 
     <div id="messages" class="well" ng-show="message">{% verbatim %}{{ message}}{% endverbatim %}</div> 

     <!-- FORM --> 
     <form ng-submit="processForm()"> 
      <!-- NAME --> 
      <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }"> 
       <label>Name</label> 
       <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name"> 
       <span class="help-block" ng-show="errorName">{% verbatim %}{{ errorName}}{% endverbatim %}</span> 
      </div> 

      <!-- SUPERHERO NAME --> 
      <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }"> 
       <label>Superhero Alias</label> 
       <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias"> 
       <span class="help-block" ng-show="errorSuperhero">{% verbatim %}{{ errorSuperhero}}{% endverbatim %}</span> 
      </div> 

      <!-- SUBMIT BUTTON --> 
      <button type="submit" class="btn btn-success btn-lg btn-block"> 
       <span class="glyphicon glyphicon-flash"></span> Submit! 
      </button> 
     </form> 

     <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED --> 
     <pre> 
      {% verbatim %}{{ formData}}{% endverbatim %} 
     </pre> 

    </div> 
</div> 

我的功能,我想从HTTP请求我的表单数据:

/** 
* @Route("/testcall") 
* @Template() 
*/ 
public function testAction() { 
    var_dump($_POST); 
    exit; 
} 

我唯一得到的是这样的网址:

http://localhost/angular/web/app_dev.php/test?name=Tommie&superheroAlias=Crawford

因此表单中的值保存在URL中。 但它不在$ _POST变量.. 它看起来像功能testAction永远不会被访问

我该如何解决这个问题?

+0

看看https://github.com/FriendsOfSymfony/FOSRestBundle为您的应用程序提供API并以角度调用它们 – 2015-04-03 10:00:19

+0

通过在浏览器中按F12并查看网络选项卡来验证正确的请求开始。这将缩小问题的角度生成事物或PHP路由器的事情。 – Cerad 2015-04-03 10:03:27

回答

5

您必须访问请求中的数据。如果您发布JSON对象像

{ 
    "foo": "bar" 
} 

你的控制器的动作看起来应该是这样的:

public function postAction(Request $request) 
{ 
    $data = json_decode($request->getContent(), true); 
    $request->request->replace($data); 

    //echo below should output 'bar' 
    echo $request->request->get('foo'); 

    //return response 
    //.... 
} 

关于更详细的信息可以发现here