从角度应用程序调用PHP脚本

我在一个Angular 5项目上工作，我希望用户能够使用联系人表单与我联系

这是一个使用MDBootstrap

contact.html

<form action = "send_mail.php" method="post" >
<div class="container">

<p class="h5 text-center mb-4">Contactez nous ! </p>

<div class="md-form">
    <i class="fa fa-user prefix grey-text"></i>
    <input type="text" id="form3" class="form-control" mdbActive>
    <label for="form3">Prenom Nom</label>
</div>

<div class="md-form">
    <i class="fa fa-envelope prefix grey-text"></i>
    <input type="text" id="form2" class="form-control" mdbActive>
    <label for="form2">Adresse mail</label>
</div>

<div class="md-form">
    <i class="fa fa-tag prefix grey-text"></i>
    <input type="text" id="form32" class="form-control" mdbActive>
    <label for="form34">Sujet</label>
</div>

<div class="md-form">
    <i class="fa fa-pencil prefix grey-text"></i>
    <textarea type="text" id="form8" class="md-textarea" style="height: 100px" mdbActive></textarea>
    <label for="form8">Votre message</label>
</div>

<div class="text-center">
    <button type="submit" class="btn btn-unique waves-light" action = "test.php" mdbRippleRadius>Send <i class="fa fa-paper-plane-o ml-1"></i></button>
</div>

联系我们
Prenom Nom
地址邮件
苏杰特
Votre消息
发送

我选择使用亚马逊SES服务。所以我下载了他们的SDK，选择了PHP解决方案

使用终端和命令

php send\u mail.php

但是当我点击我的按钮时，PHP脚本没有被调用。我认为这是一个使用HTML元素的简单调用，但即使我尝试调用像

echo'test'

这样的简单脚本，它仍然不起作用，我也不明白为什么

---

如果您有任何想法，那就太好了。

使用服务对脚本执行GET请求的基本示例：

我将在这里使用angular CLI

首先，生成一个新服务：

ng generate service <service name> --module=<module name> //replace service name and module name 

在标记中：

<div class="text-center">
    <button type="submit" class="btn btn-unique waves-light" [click]= "sendEmail()" mdbRippleRadius>Send <i class="fa fa-paper-plane-o ml-1"></i> 
    </button>
</div>

发送

请记住在生成服务时将

serviceName

更改为您提供的任何内容

---

您还可以使用angular的

[（ngmodel）]

将输入绑定到模型或类型如果您想提供用户输入，您可以将每个输入绑定，然后将对象或值传递给您的服务，并使用查询参数或post请求执行get请求。有关文档，请参阅

所以我使用了@Kisaragi方法，这非常有用。我想我就快到了，但对我来说还是不行

使用他的方法，我出现了以下错误：

GEThttp://localhost:4200/send_mail.php 404（未找到）

因此，我在我的

assets

文件夹中创建了一个

php

文件夹，并在其中添加了

send\u mail.php

在我的组件

send mail.service.ts

中，我更新了文件的路径，如下所示：

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class SendMailService {

constructor(private http:HttpClient) { }

    performGetEx():Observable<any>{
        return this.http.get<any>('../assets/php/send_mail.php');
    }
}

因此，当我转到chrome控制台时，我不再得到

get

错误，而是在我的

suscribe

函数中捕捉错误

以下是错误：

error:HttpErrorResponse{headers:HttpHeaders，状态：200，状态文本：“OK”，url:http://localhost:4200/assets/php/send_mail.php“，确定：false，…}

---

你理解这个错误吗？Http状态似乎正常…

感谢您的帮助，非常有用！多亏了你，我想我走上了正轨。我唯一不知道的是

private url='1'的值是多少http://localhost/path_to_php_script';？我不知道我的
localhost:4200在哪里。结果是我在Chrome
GET中出现了一个错误http://localhost:4200/send_mail.php 404（未找到）
由于PHP是一种服务器端语言，您仍然需要一些解释程序。您需要运行一个服务器来执行PHP。安装WAMP/MAMP并让apache或其他一些中间件监听。
<div class="text-center">
    <button type="submit" class="btn btn-unique waves-light" [click]= "sendEmail()" mdbRippleRadius>Send <i class="fa fa-paper-plane-o ml-1"></i> 
    </button>
</div>

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class SendMailService {

constructor(private http:HttpClient) { }

    performGetEx():Observable<any>{
        return this.http.get<any>('../assets/php/send_mail.php');
    }
}

sendEmail():void{
     this.sendMailService.performGetEx().subscribe((v => console.log('value: ', v)),
     (e => console.log('error: ', e)),
     (() => console.log('the sequence completed!')));
 }