如何使用angular2中的form-data发送帖子

前端之家收集整理的这篇文章主要介绍了如何使用angular2中的form-data发送帖子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试使用angular2发布数据但是当我试图发布时我有400个错误的请求…
在邮递员中进行测试,外行是可以的,我有200并且成功

 

但是,有了angular2

 

我有一个400坏请求
我做错了什么?谢谢 !

我的代码.
服务调用API:

userAddReview(paramsObj) {
    let headers = new Headers();
    headers.append('Content-Type','application/json; charset=UTF-8');
    let params = this.util.transformRequest(paramsObj);
    console.log('sending request');
    return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews?' + params,JSON.stringify({}),{ headers: headers })
        .map(
            res => {
                let newReview = res.json();
                this.reviews.push(newReview);
                console.log(this.reviews);
                return newReview;
            }
        );
}

发布组件:

submitReview(form) {
    console.log(this.review,form);
    let params = {
        id: this.review.post,user_id: this.wp.getCurrentAuthorId(),name: this.wp.getCurrentAuthorId(),email: this.wp.getCurrentAuthorId(),title:  this.review.rating_title,description: this.review.rating_comment,rating:     this.review.rating_score,};
    console.log("Review",params);
    this.review.author = this.wp.getCurrentAuthorId();
    this.wp.userAddReview(params)
            .subscribe(
                data => {
                    this.statusMessage = "Review added successfully!";
                    //clear form
                    form.reset();
                },error => {
                    console.log(error._body);
                    this.statusMessage = error._body;
                }
    );

模板:

<form name="reviewForm" #reviewForm="ngForm" novalidate *ngIf="showPanel()">
    <div *ngIf="!reviewText.valid && (reviewText.dirty || reviewText.touched)" class="alert alert-danger padding">review is required</div>

    <div class="padding">{{statusMessage}}</div>
    <ion-input type="text" [(ngModel)]="review.rating_score" #reviewscore="ngModel" name="reviewscore" placeholder="enter your review score..." required></ion-input>
    <ion-input type="text" [(ngModel)]="review.rating_title" #reviewTitle="ngModel" name="reviewTitle" placeholder="enter your review title..." required></ion-input>
    <ion-textarea
        [(ngModel)]="review.rating_comment"
        #reviewText="ngModel"
        name="reviewText"
        type="text"
        rows="2"
        placeholder="enter your review..."
        required
        >
    </ion-textarea>

    <ion-grid>
        <ion-row>
            <ion-col *ngIf="!isEditMode"><button ion-button block (click)="submitReview(reviewForm)" [disabled]="!reviewForm.valid">Add</button></ion-col>
            <ion-col *ngIf="isEditMode"><button ion-button block (click)="updateReview(reviewForm)" [disabled]="!reviewForm.valid">Update</button></ion-col>
            <ion-col width-33><button ion-button block (click)="onCancel()">Cancel</button></ion-col>
        </ion-row>
    </ion-grid>

</form>

<p *ngIf="!showPanel() && auth.authenticated()" (click)="isEditing = true;">Add Review</p>
<p *ngIf="!auth.authenticated()" (click)="reviewFormNotAuthClicked()">Add Review (login required)</p>

解决方法

克里斯发送params和标题,下面是代码

let url= `${this.wpApiURLl}users-reviews/reviews`;
  let params = new URLSearchParams;
  params.append('id',id);
  params.append('user_id',user_id);
 return this.authHttp.post( url,{ headers:headers,search:params })
.map(
            res => {
                let newReview = res.json();
                this.reviews.push(newReview);
                console.log(this.reviews);
                return newReview;
            }
        );

猜你在找的Angularjs相关文章