从 Angular 应用程序调用 PHP 脚本

Question

我正在做一个 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>

我选择使用 Amazon SES 服务。所以我下载了他们的 SDK 并选择了 PHP 解决方案。

使用终端和命令 php send_mail.php

它工作正常

但是当我点击我的按钮时，PHP 脚本没有被调用。我认为这是一个使用 HTML 元素的简单调用，但即使我尝试调用像 echo'test' 这样的简单脚本，它仍然不起作用，我不明白为什么。

如果你有什么想法那就太好了。

Answer 1

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

我将在这里使用 angular CLI。

首先，生成一个新服务：

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

打开新生成的.ts:

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

@Injectable()
export class serviceName{

    private url = 'http://localhost/path_to_php_script';
    constructor(private http:HttpClient) {
    }

    performGetEx():Observable<any>{
        return this.http.get<any>(this.url);
    }
}

然后在您将要调用的组件中注入它：

import {ServiceName} from 'path/to/service.ts';

...
//component's constructor
constructor(private  serviceName:ServiceName){}

sendEmail():void{
    this.serviceName.performGetEx().subscribe(...);
}

在您的标记中：

<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 请求执行获取请求。有关文档，请参阅 https://angular.io/guide/http。

Answer 2

所以我使用了非常有用的@Kisaragi 方法。我想我快到了，但它仍然对我不起作用。

使用他的方法我遇到了以下错误：GET http://localhost:4200/send_mail.php 404 (Not found)。

所以我在 assets 文件夹中创建了一个 php 文件夹，并在其中添加了 send_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');
    }
}

在我的组件 contact.component.ts 中，我在我的 suscribe() 方法中做了以下事情

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

因此，当我转到 chrome consol 时，我不再收到 GET 错误，但在我的 suscribe 函数中捕获了错误。

这是错误：

error: HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/assets/php/send_mail.php", ok: false, …}

你明白这个错误吗？ Http状态好像是Ok...

从 Angular 应用程序调用 PHP 脚本

Call a PHP script from an Angular application

php

amazon-ses

angular