角度$ httpを使用しているときにフォームデータが転記されないのはなぜですか？

Question

角度$ httpサービスを使用してフォームデータを投稿しようとしているときに、私は投稿のためにAPIのエンドポイントをテストし、すべてうまくいった。私は角度のアプリを使用して投稿しようとすると、私は絶えず私がより良く理解するために徹底的な角度のドキュメントを検索するが、ちょうど私のホイールを回転しているように見えるましPossibly unhandled rejection:

3つの一貫したエラーTypeError: $http.post(...).then(...).error is not a function、POST http://127.0.0.1:8000/api/reviews/ 400 (Bad Request)を取得します。私はもともと `$ http.post（ '/ api/reviews /'、this.reviews）.success（...）。error（...）しかし、削除されたという情報を見ました。私はその後（...）成功の場所に入りましたが、まだエラーがあります。

現在、私のReviewsControllerは（これはFYIディレクティブの内部で使用されているテンプレートである）以下のようになります。

myStore.controller('myReviewsController', function($http){ 
    this.reviews = {} 
    this.addReview = function(product){ 
     $http.post('/api/reviews/', this.reviews).then(function(data){ 
      console.log("Successful submission") 
     }).error(function(data){ 
      console.log('Unsuccessful submission') 
     }) 
     if(!product.reviews) 
      product.reviews =[] 

//  product.reviews.push(this.reviews) 
//  this.reviews = {} 
    } 
}) 

とレビューテンプレートを読み込む：

<h4>Reviews</h4> 
<blockquote ng-repeat="reviews in product.reviews"> 
    <b> 
     {{reviews.stars}} 
     {{reviews.body}} 
    </b> 
    <cite> 
     {{reviews.author}} 
    </cite> 
</blockquote> 
<form name="reviewForm" ng-controller="myReviewsController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate> 
<blockquote> 
    <b> 
     {{reviewCtrl.reviews.stars}} 
     {{reviewCtrl.reviews.body}} 
    </b> 
    <cite> 
     {{reviewCtrl.reviews.author}} 
    </cite> 
</blockquote> 
<fieldset> 
    <legend>Submit a review</legend> 
    <div class="form-group" ng-class="{'has-error' : reviewForm.rating.$invalid && reviewForm.rating.$dirty}"> 
     <select ng-model="reviewCtrl.reviews.stars" required class="form-control"> 
      <option value="" selected>Enter a Rating</option> 
      <option value="1">1 star</option> 
      <option value="2">2 star</option> 
      <option value="3">3 star</option> 
      <option value="4">4 star</option> 
      <option value="5">5 star</option> 
     </select> 
     <span class="text-danger" ng-show="reviewForm.rating.$invalid && reviewForm.rating.$dirty">Please enter a rating</span> 
    </div> 
    <div class="form-group" ng-class="{'has-error' : reviewForm.comments.$invalid && reviewForm.comments.$dirty }"> 
     <label>Comments</label> 
     <textarea class="form-control" name="comments" placeholder="Enter your comments" ng-model="reviewCtrl.reviews.body" required></textarea> 
     <span class="text-danger" ng-show="reviewForm.comments.$invalid && reviewForm.comments.$dirty">Please provide some comments</span> 
    </div> 
    <div class="form-group" ng-class="{'has-error' : reviewForm.email.$invalid && reviewForm.email.$dirty }"> 
     <label>Email:</label> 
     <input class="form-control" type="email" name="email" placeholder="example@gmail.com" ng-model="reviewCtrl.reviews.author" required> 
     <span class="text-danger" ng-show="reviewForm.email.$invalid && reviewForm.email.$dirty">Please provide your email</span> 
    </div> 
    <div> reviewForm is {{reviewForm.$valid}} </div> 
    <input type="submit" value="submit" ng-click="onSubmit()" class="btn"> 
</fieldset> 
</form> 

おかげ

Answer 1

を.error関数を.thenと一緒に使用することはできません。そのために.successを呼び出す必要があります。

$http.post('/api/reviews/', this.reviews).success(function(data){ 
       console.log("Successful submission") 
      }).error(function(data){ 
       console.log('Unsuccessful submission') 
      }) 

か、あなたのモデルは、サーバー側のモデルと同じでなければなりませんモデルをにおける不整合による発生し、その後.then使用この

$http.post('/api/reviews/', this.reviews).then(function(data){ 
       console.log("Successful submission") 
      }).catch(function(data){ 
       console.log('Unsuccessful submission') 
      }) 

不正要求エラーのようにそれを使用したい場合。