Supported platforms
- Android
- iOS
- browser
Install the Cordova and Ionic Native plugins:
[code]
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install –save @ionic-native/http
[/code]
แก้ไขไฟล์
- src/app/app.module.ts
- src/pages/home/home.html
- src/pages/home/home.ts
1. src/app/app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { HTTP } from '@ionic-native/http'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, HTTP, { provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule { } |
2. src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>{{text}}</p> <button ion-button (click)="doPost()">Click </button> </ion-content> |
3. src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { HTTP } from '@ionic-native/http'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { text: string; constructor(public navCtrl: NavController, private http: HTTP, public alertCtrl: AlertController) { } doPost() { // var myData = JSON.stringify({ // "LocationID": 1, // "Flag": "O", // "UserFingerID": "66" // }); // const httpOptions = { // headers: new HttpHeaders({ 'Content-Type': 'application/json' }) // }; this.http.setDataSerializer('json'); this.http.post('https://projects.voutlook.com/webapi/CheckInLocation/CheckIn2', { 'LocationID': 1, 'Flag': 'O', 'UserFingerID': '66' }, {}) .then(data => { this.text = "then"; console.log("then"); console.log("status > " + data.status); console.log("data > " + data.data); // data received by server console.log("headers> " + data.headers); }) .catch(error => { this.text = "catch"; console.log("catch"); console.log("status > " + error.status); console.log("data > " + error.error); // error message as string console.log("headers> " + error.headers); let alert = this.alertCtrl.create({ title: 'Cannot connect to server!', message: 'Please check the server settings.', buttons: ['Ok'] }); alert.present() }); } } |
รันด้วยแพลตฟอร์ม browser
[code]
> ionic cordova platform rm browser
> ionic cordova platform add browser
> ionic cordova run browser
[/code]
บรรทัดที่ 31: ระบุชนิดของข้อมูลที่ส่งไป this.http.setDataSerializer('json');
Link