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!";
    }
?>

请帮忙解决问题

Answer 1

首先你做错了post()。其次，您针对基于提供程序的 arctecture 进行了此操作。这非常糟糕。

我强烈建议您查看以下链接以了解基于提供商的架构。

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);
  }