Question

我正在尝试使用angular $ 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:

我已经仔细搜索了角度文档以获得更好的理解，但似乎只是在旋转我的轮子。我最初有`$ 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

你不能在.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')
            })

由于模型不匹配而导致错误请求错误，您的模型应与服务器端模型相同。

使用angular $ http时，为什么我的表单数据不会发布

1 个答案: