如何将表单从Angular发送到PHP？

我试图将我的表单从angular 5发送到我的php文件，然后重新注入 结果返回到角度

 /* My typescrit file */

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { trigger , state, style, transition, animate, keyframes } from 
'@angular/animations';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, 
MatIconModule, MatCheckboxModule, MatRadioModule, MatSelectModule, 
MatInputModule, MatDialogModule, MatTooltipModule, MatSnackBarModule, 
MatSidenavModule } from '@angular/material';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

constructor(public http: HttpClient) {}

let formdata = document.querySelector('form');

let datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };

let apiurl = '../../assets/php/message.php';

this.http.post(apiurl,datajson)
.subscribe(data => {alert(data.data)})
.catch(error=>{ alert (error.status)});

</pre>

/*我的打字文件*/
从“@angular/core”导入{Component，OnInit，AfterViewInit，ViewChild}；
从导入{触发器、状态、样式、过渡、动画、关键帧}
'角度/动画'；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从'@angular/http'导入{Headers，Response，RequestOptions}；
从“rxjs/Observable”导入{Observable}；
导入{MatButtonModule、MatCardModule、MatMenuModule、MatToolbarModule、，
MatIconModule、MatCheckboxModule、MatRadioModule、MatSelectModule、，
MatInputModule、MatDialogModule、MatTooltipModule、MatSnackBarModule、，
MatSidenavModule}来自“@angular/material”；
从“@angular/forms”导入{ReactiveFormsModule、FormBuilder、FormGroup、FormControl、Validators}；
构造函数（公共http:HttpClient）{}
让formdata=document.querySelector（'form'）；
让datajson={
操作：“登录”，
用户名：formdata.username.value，
useremail:formdata.useremail.value，
usersubject:formdata.usersubject.value，
usermessage:formdata.usermessage.value
};
让apiurl='../../assets/php/message.php'；
this.http.post（apirl，datajson）
.subscribe（数据=>{alert（data.data）}）
.catch（错误=>{alert（error.status）}）；

---

但我得到了“Http未定义错误”。

您可以通过从angular controller向php页面发送get或post请求来实现这一点。示例代码如下（来自我的网站）：

---

http是未定义的，因为您试图在未在类中定义的情况下使用它

我猜您显示的这个文件来自您的app.module.ts？ 如果是这样，请在此处导入HttpClientModule

import { HttpClientModule } from '@angular/common/http';
...
imports: [
// import HttpClientModule after BrowserModule.
HttpClientModule,
],

转到你的app.component.ts并在那里执行你的请求。或者在任何您希望完成的组件中

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };
apiurl = '../../assets/php/message.php';


 constructor(private http: HttpClient) {
  this.http.post(apiurl, datajson).subscribe(data => {alert(data.data)}
  .catch(error=> {alert(error)}
 }
}

---

你的问题是什么？发生了什么？你希望发生什么？你的问题是什么？正在发生什么，您希望发生什么？-Jeto 2小时前Jeto，我只想将angular 4或5中的表单信息发送到一个php文件中（用于那边的traitement…）。我知道角度1或2的方法，但我用的是角度5。感谢您的帮助。问题涉及Angular2+。我确实在app.module.ts中导入了HttpClientModule，但我仍然收到以下错误：core.js:1427错误类型错误：无法读取Object.onInvokeTask（core.js:4744）的ZoneDelegate.invokeTask（zone.js:425）中htmlButtoneElement.eval（home.component.ts:168）未定义的属性“post”在ZoneDelegate.invokeTask（zone.js:424）在ZoneTask.runTask（zone.js:192）在ZoneTask.invokeTask[as invoke]（zone.js:499）在invokeTask（zone.js:1540）在HtmlButtoneElement.globalZoneAwareCallback（zone.js:1566）是的，它会说未定义，因为您没有定义http

构造函数（私有http:HttpClient）{this.http.post（apirl，datajson）.subscribe（data=>{alert（data.data）}.catch（error=>{alert（error）}}}

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 datajson= {
      action: 'login', 
      username: formdata.username.value, 
      useremail: formdata.useremail.value,
      usersubject: formdata.usersubject.value,
      usermessage: formdata.usermessage.value
    };
apiurl = '../../assets/php/message.php';


 constructor(private http: HttpClient) {
  this.http.post(apiurl, datajson).subscribe(data => {alert(data.data)}
  .catch(error=> {alert(error)}
 }
}