我正试图将Ionic2（Angular2 typescript）项目中的表单值发送到php服务器，我将在其中发送联系邮件。
我不能得到我应该得到的值…
这是我的表格.service.ts:
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class FormService {
constructor (private _http: Http) {}
private _contactUrl = 'http://localhost:8888/Server/email.php';
// private _contactUrl = '/email';
sendMail(value: Object): Observable<any> {
const body = JSON.stringify(value);
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-urlencoded');
return this._http.post(this._contactUrl, body, {
headers : headers
}).map(res => res.json());
}
}
它是从我的表单中的onSubmit函数中使用的。ts:
import { Page, NavController } from 'ionic-angular';
import { Component } from 'angular2/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from 'angular2/common';
import { Http, Response, Headers } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { FormService} from './form.service';
@Page({
templateUrl: 'build/pages/form/form.html',
directives: [FORM_DIRECTIVES],
providers: [FormService]
})
export class Form {
contactForm: ControlGroup;
company: AbstractControl;
name: AbstractControl;
prenom: AbstractControl;
phone: AbstractControl;
email: AbstractControl;
website: AbstractControl;
message: AbstractControl;
arrivee: AbstractControl;
projet: AbstractControl;
projets = [
{ id: 1, label: 'Site Internet' },
{ id: 2, label: 'Site Intranet/Extranet' },
{ id: 3, label: 'Développement PHP' },
{ id: 4, label: 'Développement C#' },
{ id: 5, label: 'Conception Base de Données' },
{ id: 6, label: 'Tiers Maintenance Applicative' },
{ id: 7, label: "Recrutement d'un collaborateur Handicapé" }
];
arrivees = [
{ id: 1, label: 'Internet' },
{ id: 2, label: 'Recommandation' },
{ id: 3, label: 'Evênement' }
];
response: string;
value: any;
constructor(public nav: NavController, fb: FormBuilder, private _http: Http, private _formService: FormService) {
this.nav = nav;
// New controlGroup instance
this.contactForm = fb.group({
// Validators Rules for each field
// Champ XXX: ['', ...] correspondants au [ngFormControl]="XXX" de la vue HTML (inpput)
name: ['', Validators.compose([Validators.required, Validators.minLength(3), this.checkFirstCharacterValidator])],
prenom: ['', Validators.compose([Validators.minLength(3), this.checkFirstCharacterValidator])],
company: ['', Validators.compose([Validators.required, Validators.minLength(3), this.checkFirstCharacterValidator])],
projet: ['', Validators.required],
arrivee: ['', Validators.required],
phone: ['', Validators.compose([Validators.required, Validators.minLength(10)])],
email: ['', Validators.required],
website: ['', Validators.minLength(3)],
message: ['', Validators.compose([Validators.required, Validators.minLength(20)])]
});
this.name = this.contactForm.controls['name'];
this.prenom = this.contactForm.controls['prenom'];
this.company = this.contactForm.controls['company'];
this.projet = this.contactForm.controls['projet'];
this.arrivee = this.contactForm.controls['arrivee'],
this.phone = this.contactForm.controls['phone'],
this.email = this.contactForm.controls['email'],
this.website = this.contactForm.controls['website'],
this.message = this.contactForm.controls['message']
}
// Check if firt character is a number
checkFirstCharacterValidator(control: Control): { [s: string]: boolean } {
if (control.value.match(/^'d/)) {
return { checkFirstCharacterValidator: true };
}
}
onSubmit(value) {
this._formService.sendMail({value})
.subscribe(
response => this.response = response,
error => console.log(error)
);
}
}
在我的email.php文件中，我正在尝试获取POST：
<?php
header('Content-type: application/json');
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);
}
$value = json_decode(file_get_contents('php://input'));
// for test
echo $value->name;
?>
我检查了chrome的控制台，我得到了一些东西：来自控制台的屏幕截图
如何将angular2的帖子放到我的php中？我是不是错过了什么？
我可以在您的代码中看到两个问题：
- 您可以使用JSON.stringify创建JSON内容，但对于表单，您需要使用
URLSearchParams类或手动创建字符串内容 - 您的内容类型值不正确。它是
application/x-www-form-urlencoded而不是application/x-www-urlencoded
以下是您应该使用的内容：
sendMail(value: Object): Observable<any> {
const body = new URLSearchParams();
Object.keys(value).forEach(key => {
body.set(key, value[key]);
}
let headers = new Headers();
headers.append('Content-Type',
'application/x-www-form-urlencoded');
return this._http.post(this._contactUrl, body.toString(), {
headers : headers
}).map(res => res.json());
}
我设法让它工作起来，它只是：
sendMail(value: any): Observable<any> {
const body = new URLSearchParams(value);
body.set('name', value.name);
body.set('company', value.company);
body.set('projet', value.projet);
body.set('arrivee', value.arrivee);
body.set('phone', value.phone);
body.set('email', value.email);
body.set('website', value.website);
body.set('message', value.message);
body.set('name', value.name);
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
return this._http.post(this._contactUrl, body.toString(), {
headers : headers
}).map(res => res.json());
}
在表格中.php:
<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
$formData = json_decode(file_get_contents('php://input'));
foreach ($formData as $key=>$value) {
$_POST[$key]=$value;
}
$formObject = $_POST['name'];
(...) ?>
感谢Thierry Templier的宝贵帮助。
也许对某些人有用。我遇到了嵌套对象的问题——传递给PHP对象的问题如下：
var obj = {
value: 1,
innerObj: {
title: "title",
innerObject: {
value: 1
}
}
};
我使用querystring解析器解决了这个问题
使用示例：
//at top of you .ts file
let qs = require('qs');
return this.http.post(url, qs.stringify(data), {headers: this.postHeader})
.map((resp: Response) => resp.json())
.catch((error: any) => Observable.throw(error) || 'Server error');
对于非嵌套对象也很有用