爲什麼我的表單數據在使用angular $ http時沒有發佈

我正在嘗試使用角度$ http服務發佈表單數據時遇到了路障。我測試了發佈的API端點，並且在那裏一切正常。當我嘗試使用角度應用後，我不斷地得到三個一致的錯誤TypeError: $http.post(...).then(...).error is not a function，POST http://127.0.0.1:8000/api/reviews/ 400 (Bad Request)，Possibly unhandled rejection:

我搜索角文檔throughly爲了更好地理解，但似乎只是紡紗我的車輪。我原本有`$ 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="[email protected]" 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>

感謝

來源

2017-02-28 Joel Carter

你檢查過「api/reviews」api嗎？ –

是的，api呼籲電子郵件，明星和評論作爲數據。我也檢查郵遞員的路徑，它的作用就像一個魅力......不知道爲什麼它不工作在我的形式 –

嘗試刪除'ng-click =「onSubmit（）」，但這也沒有工作。 –

你不能在.then中使用.error函數。你需要調用.success。

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

或者如果你想。然後用然後用它像這樣

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

錯誤的請求錯誤的發生是由於不匹配模型模型應該是相同的服務器端模型。

來源

2017-02-28 05:08:17 Keshav

感謝您的支持。我不再得到'TypeError'或'Possible unhandled Rejections'錯誤......但我仍然得到'400錯誤請求'錯誤。任何我應該改變的形式？ –

我認爲它應該是'ng-submit =「reviewForm。$ valid && reviewCtrl.addReview（reviewCtrl.reviews）」' –

@hadiJz我已經改變了這個...但是仍然出現'Bad Request'錯誤。我猜這是因爲我需要改變我的表單模型？ –

爲什麼我的表單數據在使用angular $ http時沒有發佈

回答

相關問題