シナトラ・エラー - JSON :: ParserError - 784：予期しないトークン

Question

私はシナトラ（MongoDBの）内のAPIを持っています。私はAngularjsで書かれた非常に小さなアプリケーションからPOSTメソッドでいくつかのデータを書き込もうとしています。私が送信しようとしているデータは 'aplication/x-www-form-urlencoded'です。私はエラーを取得しておくいくつかの理由：

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

私はURLにエンコード一部のデータがあることがわかりますが、シナトラはそれを正しく読み取ることはありません。

シナトラ：

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

AngularJsスクリプト：

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 = ''; 
       } 
      }); 
    }; 
} 

フォームはHTMLで完了した後、私はボタンで機能FORMDATAを呼び出しています：

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

エラーが発生します。 JSON文字列としてデータを投稿する：

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 = ''; 
       } 
      }); 
    }; 
} 

$ HTTPサービスは自動的にJSON文字列としてJavaScriptオブジェクトを符号化します。コンテンツタイプヘッダーはapplication/jsonに設定されています。

.success方法が廃止されました。代わりに.thenを使用してください。詳細については、Why are angular $http success/error methods deprecated? Removed from v1.6?を参照してください。

Answer 2

あなたがしようとしていますURLエンコードされたデータをJSONパーサーに渡して解析します。これは動作しません。

は、通常の文字列ではなく、JSON文字列としてresponse.bodyを解析してみます。 AngularJSコードは、URLエンコードされた形式でデータを送信しているので