Angular 9 Ionic 5 httpclient post 发送空数组
Angular 9 Ionic 5 httpclient post sending empty array
我正在使用 Angular 9 和 Ionic 5 创建一个应用程序,我对此很陌生,如果我遗漏了一些明显的东西,请原谅我。以下是我的App代码:
import { HttpClient } from '@angular/common/http';
etc...
constructor(private http: HttpClient) { }
authenticate(phone: string, password: string) {
let frmData = new URLSearchParams();
// let frmData = new FormData(); //just to show that I have tried this also
const headeroptions = {
// 'enctype': 'multipart/form-frmData;', // when using FormData above
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
};
frmData.append('emailOrMobile', phone);
frmData.append('password', password);
console.log("login: " + phone + " " + password); //this shows the values correctly
console.log("frmData: " + frmData); //frmData: emailOrMobile=1234567890&password=111111
return this.http.post<any>('https://example.com/APP/login.php', {frmData}, {headers: headeroptions}
// {"emailOrMobile":phone, "password":password} //Also tried without creating the object beforehand
).subscribe(data => {
console.log("Subscribed Data: ");
console.log(data);
},
error => {
console.log('error: ' + error.error);
console.log('Name: ' + error.name);
console.log('Message: ' + error.message);
console.log('Status: ' + error.status);
});
}
我也尝试了其他版本,我将 .subscribe... 等替换为:
.pipe(tap(this.setUserData.bind(this)));
但这也没有用。那里有很多解决方案,但大多数解决方案都是针对 Angular 的旧版本并且不使用 HttpClient,或者他们使用并建议订阅可观察对象——我已经在这样做了。
在另一端,php代码很简单:
$data = json_decode(file_get_contents("php://input"), true);
如果我回显或尝试使用 $data,它是一个打印为 {} 的空数组或只是一个空白 space(无法始终如一地打印“{}”)。我什至试过
count($data);
然后 returns 0.
我已经在我的本地机器上进行了测试,它可以将 args 作为 javascript 对象传递:
{ emailOrMobile: phone, password: password}
在后端的 php 脚本中,我通常允许 CORS 请求。我不确定您的环境是否需要(请参阅命令 header("Access-Control-Allow-Origin: *");
)。
页面的完整打字稿:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor(private http: HttpClient) {
this.authenticate('123', 'mypassword');
}
authenticate(phone: string, password: string) {
const headeroptions = {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
};
let params = { emailOrMobile: phone, password: password};
return this.http.post<any>('http://localhost/backend/authtest.php', params, {headers: headeroptions}).subscribe(data => {
console.log("Subscribed Data: ");
console.log(data);
},
error => {
console.log('error: ' + error.error);
console.log('Name: ' + error.name);
console.log('Message: ' + error.message);
console.log('Status: ' + error.status);
});
}
}
后台php脚本authtest.php
:
<?php
//Allow requests from different domain:
header("Access-Control-Allow-Origin: *");
$data = json_decode(file_get_contents("php://input"), true);
echo json_encode([ 'success' => true, 'params' => $data]);
运行 ionic 应用程序后我在 Chrome 中得到的输出:
我正在使用 Angular 9 和 Ionic 5 创建一个应用程序,我对此很陌生,如果我遗漏了一些明显的东西,请原谅我。以下是我的App代码:
import { HttpClient } from '@angular/common/http';
etc...
constructor(private http: HttpClient) { }
authenticate(phone: string, password: string) {
let frmData = new URLSearchParams();
// let frmData = new FormData(); //just to show that I have tried this also
const headeroptions = {
// 'enctype': 'multipart/form-frmData;', // when using FormData above
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
};
frmData.append('emailOrMobile', phone);
frmData.append('password', password);
console.log("login: " + phone + " " + password); //this shows the values correctly
console.log("frmData: " + frmData); //frmData: emailOrMobile=1234567890&password=111111
return this.http.post<any>('https://example.com/APP/login.php', {frmData}, {headers: headeroptions}
// {"emailOrMobile":phone, "password":password} //Also tried without creating the object beforehand
).subscribe(data => {
console.log("Subscribed Data: ");
console.log(data);
},
error => {
console.log('error: ' + error.error);
console.log('Name: ' + error.name);
console.log('Message: ' + error.message);
console.log('Status: ' + error.status);
});
}
我也尝试了其他版本,我将 .subscribe... 等替换为:
.pipe(tap(this.setUserData.bind(this)));
但这也没有用。那里有很多解决方案,但大多数解决方案都是针对 Angular 的旧版本并且不使用 HttpClient,或者他们使用并建议订阅可观察对象——我已经在这样做了。
在另一端,php代码很简单:
$data = json_decode(file_get_contents("php://input"), true);
如果我回显或尝试使用 $data,它是一个打印为 {} 的空数组或只是一个空白 space(无法始终如一地打印“{}”)。我什至试过
count($data);
然后 returns 0.
我已经在我的本地机器上进行了测试,它可以将 args 作为 javascript 对象传递:
{ emailOrMobile: phone, password: password}
在后端的 php 脚本中,我通常允许 CORS 请求。我不确定您的环境是否需要(请参阅命令 header("Access-Control-Allow-Origin: *");
)。
页面的完整打字稿:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor(private http: HttpClient) {
this.authenticate('123', 'mypassword');
}
authenticate(phone: string, password: string) {
const headeroptions = {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
};
let params = { emailOrMobile: phone, password: password};
return this.http.post<any>('http://localhost/backend/authtest.php', params, {headers: headeroptions}).subscribe(data => {
console.log("Subscribed Data: ");
console.log(data);
},
error => {
console.log('error: ' + error.error);
console.log('Name: ' + error.name);
console.log('Message: ' + error.message);
console.log('Status: ' + error.status);
});
}
}
后台php脚本authtest.php
:
<?php
//Allow requests from different domain:
header("Access-Control-Allow-Origin: *");
$data = json_decode(file_get_contents("php://input"), true);
echo json_encode([ 'success' => true, 'params' => $data]);
运行 ionic 应用程序后我在 Chrome 中得到的输出: