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请求的基本示例：

我将在这里使用角度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更改为生成服务时提供的任何内容。

如果您想提供用户输入，您还可以将角度[(ngmodel)]绑定到模型或类型，您可以将每个输入绑定，然后将一个或多个对象传递给您的服务和使用查询参数或发布请求执行get请求。有关文档，请参阅https://angular.io/guide/http。

Answer 2

所以我使用了非常有用的@Kisaragi方法。我想我几乎就在那里，但它仍然不适合我。

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

所以我在php文件夹中创建了一个assets文件夹，并在其中添加了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状态似乎没问题......

从Angular应用程序调用PHP脚本

2 个答案: