Sinatra Fehler - JSON :: ParserError - 784: unerwartetes Token

Question

Ich habe eine API in Sinatra (Mongodb). Ich versuche, einige Daten mit der POST-Methode aus einer sehr kleinen in Angularjs geschriebenen Anwendung zu schreiben. Daten, die ich zu senden versuche, ist "application/x-www-form-urlencoded". Aus irgendeinem Grund, den ich erhalte immer die Fehlermeldung:

JSON::ParserError - 784: unexpected token at 'id=111&name=Bruce&city=LA&address=City1': 

Ich kann sehen, dass einige Daten dort in URL, aber Sinatra nicht richtig gelesen codiert ist.

Sinatra:

post '/companies' do 
    company=JSON.parse(request.body.read) 
    company = Company.new(company) 
end 

AngularJS Skript:

var formApp = angular.module('formApp', []); 
function formController($scope, $http) { 
    $scope.formData = {}; 
    $scope.processForm = function() { 
     $http({ 
      method : 'POST', 
      url  : 'http://localhost:4567/api/v1/companies', 
      data : $.param($scope.formData), // pass in data as strings 
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }) 
      .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 = ''; 
       } 
      }); 
    }; 
} 

Ich bin die Funktion Formulardaten mit der Taste aufrufen, nachdem das Formular in HTML abgeschlossen ist:

body ng-app="formApp" ng-controller="formController"> 
<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">{{ message }}</div> 

    <!-- FORM --> 
    <form ng-submit="processForm()"> 


     <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }"> 
      <label>ID</label> 
      <input type="text" name="id" class="form-control" placeholder="Caped Crusader" ng-model="formData.id"> 
      <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span> 
     </div> 


     <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">{{ errorName }}</span> 
     </div> 

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

       <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }"> 
      <label>Address</label> 
      <input type="text" name="address" class="form-control" placeholder="Caped Crusader" ng-model="formData.address"> 
      <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</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> 
     {{ formData }} 
    </pre> 

</div> 

Answer 1

Der Fehler tritt auf, weil der AngularJS-Code Daten in URL-codierter Form sendet. Um POST-Daten als JSON string:

var formApp = angular.module('formApp', []); 
function formController($scope, $http) { 
    $scope.formData = {}; 
    $scope.processForm = function() { 
     $http({ 
      method : 'POST', 
      url  : 'http://localhost:4567/api/v1/companies', 
      ̶d̶a̶t̶a̶ ̶ ̶ ̶ ̶:̶ ̶$̶.̶p̶a̶r̶a̶m̶(̶$̶s̶c̶o̶p̶e̶.̶f̶o̶r̶m̶D̶a̶t̶a̶)̶,̶ ̶ ̶/̶/̶ ̶p̶a̶s̶s̶ ̶i̶n̶ ̶d̶a̶t̶a̶ ̶a̶s̶ ̶s̶t̶r̶i̶n̶g̶s̶ 
      data : $scope.formData, //data automatically coded as JSON string 
      ̶h̶e̶a̶d̶e̶r̶s̶ ̶:̶ ̶{̶ ̶'̶C̶o̶n̶t̶e̶n̶t̶-̶T̶y̶p̶e̶'̶:̶ ̶'̶a̶p̶p̶l̶i̶c̶a̶t̶i̶o̶n̶/̶x̶-̶w̶w̶w̶-̶f̶o̶r̶m̶-̶u̶r̶l̶e̶n̶c̶o̶d̶e̶d̶'̶ ̶}̶    
     }) 
      ̶.̶s̶u̶c̶c̶e̶s̶s̶(̶f̶u̶n̶c̶t̶i̶o̶n̶(̶d̶a̶t̶a̶)̶ ̶{̶ 
      .then(function(response) { 
       ̲v̲a̲r̲ ̲d̲a̲t̲a̲ ̲=̲ ̲r̲e̲s̲p̲o̲n̲s̲e̲.̲d̲a̲t̲a̲;̲ 
       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 = ''; 
       } 
      }); 
    }; 
} 

Die $ HTTP-Dienst kodiert automatisch JavaScript-Objekte als JSON-Strings. Der Kopf des Inhaltstyps ist auf application/json festgelegt.

Die Methode .success ist veraltet. Verwenden Sie stattdessen .then. Weitere Informationen finden Sie unter Why are angular $http success/error methods deprecated? Removed from v1.6?.

Answer 2

Sie versucht werden URL-codierte Daten analysieren, indem Sie sie durch einen JSON-Parser übergeben. Dies wird nicht funktionieren.

Versuchen Sie, response.body als regulären String statt als JSON-String zu analysieren.