javascript - 电子邮件不会发送 Angular 4 和 PHP

标签 javascript php angular email typescript

我正在尝试从我页面上的联系表单发送电子邮件,我正在使用 PHP 脚本将其发送到我的电子邮件,我正在关注 this教程,我已经使用了他的示例并且它确实有效......但我似乎无法让它在我的应用程序中工作,一开始我遇到了一些 404 错误的麻烦,但后来我发布了我的网站并将其放在实时服务器上,现在我获得了成功代码

enter image description here

但我没有收到电子邮件,所以我去了 http://mysite/assets/email.php我看到了这个错误

enter image description here

get-in-touch.component.ts

import { Component, OnInit } from '@angular/core';
import { AppService, IMessage } from '../../services/email.service';

@Component({
  selector: 'app-get-in-touch',
  templateUrl: './get-in-touch.component.html',
  styleUrls: ['./get-in-touch.component.scss'],
  providers: [AppService]
})
export class GetInTouchComponent implements OnInit {
  message: IMessage = {};

  constructor(
    private appService: AppService
  ) { }

  ngOnInit() {
  }

  sendEmail(message: IMessage) {
    this.appService.sendEmail(message).subscribe(res => {
      console.log('AppComponent Success', res);
    }, error => {
      console.log('AppComponent Error', error);
    });
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '@angular/router';


import { AppComponent } from './app.component';
import { GetInTouchComponent } from './get-in-touch/get-in-touch.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { httpModule } from @angular/forms;

export const ROUTES: Routes = [
  { path: 'get-in-touch', component: GetInTouchComponent }
];

 @NgModule({
   declarations: [
    AppComponent,
    GetInTouchComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES),
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

email.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Resolve } from '@angular/router';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

export interface IMessage {
  name?: string;
  email?: string;
  message?: string;
}

@Injectable()
export class AppService {
  private emailUrl = '../app/get-in-touch/email.php';

  constructor(private http: Http) {

  }

  sendEmail(message: IMessage): Observable<IMessage> | any {
    return this.http.post(this.emailUrl, message)
      .map(response => {
        console.log('Sending email was successfull', response);
        return response;
      })
      .catch(error => {
        console.log('Sending email got error', error);
        return Observable.throw(error);
      });
  }
}

email.php

<?php

header('Content-type: application/json');

$errors = '';

if(empty($errors)){
    $postdata = file_get_contents("php://input");
    $request = json_decode($postdata);

    $from_email = $request->email;
    $message = $request->message;
    $from_name = $request->name;

    $to_email = $from_email;

    $contact = "<p><strong>Name: </strong> $from_name</p><p><strong>Email:</strong> $from_email</p>";
    $content = "<p>$message</p>";

    $website = "Thirsty Studios";
    $email_subject = "Contact Form";

    $email_body = '<html><body>';
    $email_body .= '$contact $content';
    $email_body .= '</body></html>';

    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    $headers .= "From: $from_email\n";
    $headers .= "Reply-To: $from_email";

    mail($to_email,$email_subject,$email_body,$headers);

    $response_array['status'] = 'success';
    $response_array['from'] = $from_email;
    echo json_encode($response_array);
    echo json_encode($from_email);
    header($response_array);
    return $from_email;
} else {
    $response_array['status'] = 'error';
    echo json_encode($response_array);
    header('Location: /error.html');
}
?>

我以前从未做过这样的事情(Angular + PHP),但我已经完成了教程中所说的一切,但我似乎无法让它工作,任何帮助将不胜感激,请让我知道您是否需要更多信息

最佳答案

此时似乎请求甚至没有到达您的 PHP 脚本,因为请求返回 404。第一个错误可能发生是因为节点服务器不会执行 .php 文件。您需要使用类似 xammp 的方式在不同的端口上设置本地 Apache 服务器。 (或您的首选选择)。或者以其他方式向实时网络服务器发出请求。

似乎第二条和第三条错误消息可能来自电子邮件服务中的 .catch 回调,请尝试使用以下内容:

.catch((error: Error) => {
  console.log('Sending email got error', error.message);
  return Observable.throw(error.message);
});

使用 PHP 有一些替代方案,例如 formspree甚至 Gmail API而且我相信您会通过一些谷歌搜索找到其他人。但这里有一个 example using fromspree .

您还应该能够稍微简化您的 PHP 脚本,如下所示:

<?php
$errors = '';

if( empty( $errors ) ) {

    $response_array = array();

    $from_email = $_POST['email'];
    $message    = $_POST['message'];
    $from_name  = $_POST['name'];

    $to_email = $from_email;

    $contact = "<p><strong>Name: </strong> $from_name</p><p><strong>Email:</strong> $from_email</p>";
    $content = "<p>$message</p>";

    $website = "Thirsty Studios";
    $email_subject = "Contact Form";

    $email_body = "<html><body>";
    $email_body .= "$contact $content";
    $email_body .= "</body></html>";

    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    $headers .= "From: $from_email\n";
    $headers .= "Reply-To: $from_email";

    mail( $to_email, $email_subject, $email_body, $headers );

    $response_array['status'] = 'success';
    $response_array['from'] = $from_email;
    echo json_encode( $response_array );

} else {

    $response_array['status'] = 'error';
    echo json_encode($response_array);
}
?>

关于javascript - 电子邮件不会发送 Angular 4 和 PHP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47824181/

相关文章:

javascript - 如何使用 SpriteMaterial 和 DirectionalLight 获得阴影

javascript - iTop,在哪里实现onchange javascript?

angular - 在 RxJs 和 Angular 中测试可观察到的 'next' 回调

angular - 如何在 Angular 2 Material 中将 div 的背景颜色设置为主要主题颜色

angular - Karma 在阅读 typescript 时抛出 "Module parse failed"

javascript - 访问事件以从源自标记的 onclick 属性的自定义函数调用 preventdefault

javascript - 如何自定义数据表中的表?

javascript - "this"将 JSONP 数组分配给 AngularJS Controller 时变量不起作用

php - 处理 JSON 数据获取的最理想方式

php - 我如何将 session 电子邮件发送给 php?