Ionic 3發佈數據到Mysql

Question

我是新來的Ionic 3，我想提交他的用戶名數據到MySQL。我使用下面的代碼，它不顯示任何錯誤消息，但它不顯示提交給api.php文件的值。我們如何在下面的api.php文件中使用Insert命令。

contact.html

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>My Contact</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
<ion-list> 
    <ion-item> 
    <ion-label floating>Username</ion-label> 
    <ion-input type="text" name="username" [(ngModel)]="data.username"></ion-input> 
    </ion-item> 
<button ion-button color="danger" round (click)="submit()">Submit</button> 
<button ion-button color="primary" menuToggle>Toggle Menu</button> 
</ion-list> 
    </ion-content> 

contact.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Http } from '@angular/http'; 
/** 
* Generated class for the ContactPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 

@IonicPage() 
@Component({ 
    selector: 'page-contact', 
    templateUrl: 'contact.html', 
}) 
export class ContactPage { 
    data:any = {}; 
    constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) { 
    this.data.username = ''; 
    this.data.response = ''; 
    this.http=http; 
} 

submit() { 
var link = '../contact/api.php'; 
var myData = JSON.stringify({username: this.data.username}); 
this.http.post(link, myData) 
.subscribe(data => { 
this.data.response = data["_body"]; 
}, error => { 
console.log("Oooops!"); 
}); 
} 
    ionViewDidLoad() { 
    console.log('ionViewDidLoad ContactPage'); 
    } 

} 

api.php

<?php 
    // Allow from any origin 
    if (isset($_SERVER['HTTP_ORIGIN'])) { 
     header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); 
     header('Access-Control-Allow-Credentials: true'); 
     header('Access-Control-Max-Age: 86400'); // cache for 1 day 
    } 

    // Access-Control headers are received during OPTIONS requests 
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 

     if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) 
      header("Access-Control-Allow-Methods: GET, POST, OPTIONS");   

     if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) 
      header("Access-Control-Allow-Headers:  {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); 

     exit(0); 
    } 

    echo "You have CORS!"; 

    $postdata = file_get_contents("php://input"); 
    if (isset($postdata)) { 
     $request = json_decode($postdata); 
     $username = $request->username; 
     echo "hello how are you" 
     if ($username != "") { 
      echo "Server returns: " . $username; 
     } 
     else { 
      echo "Empty username parameter!"; 
     } 
    } 
    else { 
     echo "Not called properly with username parameter!"; 
    } 
?> 

請輔助性T o解決問題

Answer 1

首先你做錯了post()。其次，你已經完成了針對基於供應商的arctecture.Which是非常壞。

我強烈建議您查看以下鏈接以瞭解基於提供程序的體系結構。

In-Depth Explanation of Providers

How, Why, and When to Use Providers

你post()方法應該是這樣的：

myProvider.ts

post(url: string, body: string): Observable<any> { 
    let headers = new Headers(); 
    headers.append('content-type', 'application/json'); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post(url, body, options) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 


    //to extract data 
    private extractData(res: Response) { 
    let body = res.json(); 
    return body || {}; 
    } 

    //to handle error 
    private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    }