用离子3发布表格数据

时间:2018-01-17 06:23:49

标签: php post ionic3

我想发布表单数据并从post方法中检索相同但它失败了。它不向外部链接发布任何内容。我在PHP中创建了外部链接。有什么问题?

这是完整的代码。我使用来自' @ angular / http'的HTTP。这是完整的代码

我的home.html代码如下 home.html的

<ion-header>
 <ion-navbar>
 <ion-title>
 Ionic3 Server Send Test
 </ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list>
 <ion-item>
 <ion-label floating>id</ion-label>
 <ion-input type="text" name="id" [(ngModel)]="data.id"></ion-input>
 </ion-item>

 <ion-item>
 <ion-label floating>Username</ion-label>
 <ion-input type="text" name="name" [(ngModel)]="data.name"></ion-input>
 </ion-item>

 <button ion-button block (click)="submit()">Submit to server</button>
 </ion-list>

 <ion-card>
 <ion-card-header>
 Response
 </ion-card-header>

 <ion-card-content>
 <b>{{data.response.id}}</b>
 <b>{{data.response.name}}</b>
 </ion-card-content>
 </ion-card>
</ion-content>

我的home.ts代码是下面的

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http'; //https://stackoverflow.com/questions/43609853/angular-4-and-ionic-3-no-provider-for-http

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})

export class HomePage {
 data:any = {};

 constructor(public navCtrl: NavController, public http: Http) {
 this.data.name = '';
 this.data.id = '';
 this.data.response = '';

 this.http = http;
 }

 submit() {
 var link = 'http://127.0.0.1:3000/passdata';
 var myData = JSON.stringify({id: this.data.id, name: this.data.name});

 this.http.post(link, myData)
 .subscribe(data => {
 this.data.response = data["_body"]; //https://stackoverflow.com/questions/39574305/property-body-does-not-exist-on-type-response
 }, error => {
 console.log("Oooops!");
 });
 }
}

1 个答案:

答案 0 :(得分:0)

你可以在打开开发人员工具的chrome浏览器上试一试,然后向我们展示网络标签,查看是否有任何请求失败并将错误粘贴到帖子中。

从您的代码中,我可以看到您忘记在请求标头中指定"Content-Type": "application/json"

您可能必须从构造函数中删除this.http = http;