Question

我正在使用Ionic2，我想使用POST请求将数据从Form发送到Web服务，但每次打印表单数据时我发现它都是空的，服务发送给我的是它没有收到数据。这是我的HTML代码：

    <div class="login-box">
    <form #registerForm="ngForm">
        <ion-row>
            <ion-col id="imageContainer">
                <button (click)="upload()" ion-button>Take Pic & Upload </button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-list inset>
                    <ion-item>
                        <ion-label floating>{{ 'USERNAME' | translate }}</ion-label>
                        <ion-input type="text" name="username" #username required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'MOBILENUMBER' | translate }}</ion-label>
                        <ion-input type="text" name="mobile" #mobile required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'EMAILADDRESS' | translate }}</ion-label>
                        <ion-input type="email" name="email" #email required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'PASSWORD' | translate }}</ion-label>
                        <ion-input type="password" name="password" #password required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'CONFIRMPASSWORD' | translate }}</ion-label>
                        <ion-input type="password" name="confirmpass" #confirmPass required></ion-input>
                    </ion-item>

                </ion-list>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col class="signup-col">
                <button ion-button class="submit-btn" (click)="signUp(username.value,email.value,password.value,mobile.value,confirmPass.value)" full type="submit" [disabled]="!registerForm.form.valid">sign up</button>
                <button ion-button class="register-btn" block clear (click)="login()">sign in</button>
            </ion-col>
        </ion-row>

    </form>
</div>

服务方法：

register(username,email,password,mobile,) {

    let body = new FormData();
    body.append('user_name',username);
    body.append('email',email);
    body.append('mobile',mobile);
    body.append('password',password);
    body.append('image','dsdsdsddsd');

    console.log('body from service: ',body);
    let headers = new Headers();
    headers.append("Content-Type","application/formdata");

    return this.http.post(this.registerUrl,body,{headers:headers})
    .map((response:Response)=>response.json())


}

JS：

signUp(username,email,password,mobile,confirmPass) {

this.userService.register(username,email,password,mobile)
.subscribe(data=>{
    console.log('register data from service: ',data);
  },
  (err)=> console.log('error: ',err)
)
}

这是从服务中收到的数据：对象{结果：数组（0），状态：对象} 结果：阵列（0）状态：宾语信息：阵列（4） 0 ： “用户名字段是必需的。” 1 ： “电子邮件字段是必需的。” 2 ： “移动领域是必需的。” 3 ： “密码字段是必需的。” 长度： 4

Answer 1

您必须在发送请求之前对数据进行字符串化，并使用此功能

let body =  JSON.stringify(body)  return this.http.post(this.registerUrl,body,{headers:headers})
    .map((response:Response)=>response.json())

Ionic2：将提交表单数据发送到服务

1 个答案: