Вызов PHP-скрипта из приложения Angular - PullRequest
Новая
       35

Вызов PHP-скрипта из приложения Angular

0 голосов
/ 30 апреля 2018

Я работаю над проектом 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 Script не вызывается. Я думал, что это простой вызов с использованием элемента HTML, но даже когда я пытаюсь вызвать простой скрипт, такой как echo'test', он все равно не работает, и я не понимаю, почему.

Если у вас есть идея, было бы неплохо.

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Поэтому я использовал метод @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-статус, кажется, в порядке ...

0 голосов
/ 30 апреля 2018

Базовый пример использования сервиса для выполнения 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 на то, что вы указали при создании службы.

Вы также можете использовать Angular [(ngmodel)] для привязки ввода к модели или типу, если вы хотите предоставить пользовательский ввод, вы должны каждый ввод связывать, затем передавать объект или значения в вашу службу и выполнять запрос get, используя параметры запроса или пост-запрос. См. https://angular.io/guide/http для документации.

...