如何使用 Axios 将 ReactJs 中的表单提交给 PHP 处理程序（PHP miler 以电子邮件形式发送数据）？

Question

我已经用 ReactJs 写了一个基本的表单。我正在阻止默认提交，因为我想在提交表单之前进行一些检查。假设表单已成功提交，然后我希望服务器收集数据，然后将其作为电子邮件发送到某个地址。必须发送的数据只是非常基本的格式。因此，在提交表单之前一切正常，但在控制台中我看到错误 Failed to load resource: the server responded with a status of 500 ()。我只是打算通过 PHP 邮件程序将此数据作为电子邮件发送。

于是上网查了几个办法。我最终在 JavaScript 中使用 FormData() API 以及 headers: {'Content-Type': 'multipart/form-data' } 参数和 AxiosJs 来发出 AJAX 请求。这基本上是通过一些 Whosebug 研究得出的。我可以在 DevTools 的“网络”选项卡中看到正在发送数据。我对 Php 知之甚少，所以我假设故障必须出在我在网上获得并试图操纵的代码的某个地方。

Reactform.jsx

import React, { Component } from 'react';
import {sendData} from './../../axios/getData';

export default class GameOver extends Component {

    constructor(props){
        super(props);
        this.state = {
            ...
        }
    }

    handleChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({
            [name]: value
        })
    }

    handleSubmit = (event) => {
        event.preventDefault();
        const self = this;
        if (this.state.codeCheck === this.state.code){
            sendData(self.state)
            .then(()=>{self.setState({formSuccess: true})})
            .catch(()=>{self.setState({formSuccess: false})});

        } else {
            self.setState({formSuccess: false});
            alert('The secret code is incorrect. Please contact your mentor or teacher.')
        }
    }
    render() {
        return (
            this.props.gameOver &&
            <div className="success slideInRight">
                    <Gameover />
                            <div>
                                <form className = "success-form" onSubmit = {this.handleSubmit}>
                                    <label>
                                        Uw Naam:
                                        <input type="text" name="name" placeholder = "John Doe" value = {this.state.name} onChange = {this.handleChange} required />
                                    </label>
                                    <label>
                                        Uw email:
                                        <input type="email" name="email" placeholder = "johndoe@domain.com" value = {this.state.email} onChange = {this.handleChange} required />
                                    </label>
                                    <label>
                                        Uw score:
                                        <input type="number" name="score" value = {this.state.score} readOnly />
                                    </label>
                                    <label>
                                        Rubriek:
                                        <input type="text" name="genre" value = {this.state.genreName} readOnly />
                                    </label>
                                    <label>
                                        Uw School:
                                        <input type="text" name="school" placeholder =  "Enter your school name" onChange = {this.handleChange} required />
                                    </label>
                                    <label>
                                        Uw groep:
                                        <input type="text" name="group" placeholder = "Enter your group name" onChange = {this.handleChange} required />
                                    </label>
                                    <label>
                                        Uw code:
                                        <input type="text" name="code" placeholder =  "Enter your secret code" onChange = {this.handleChange} required />
                                    </label>
                                    <input type="submit" value="Submit" />
                                </form>
                            </div>
                        </div>
                        <button onClick = {()=>{ this.props.resetGame()} }>Restart Game</button>
                    </div>
            </div>
        )
    }
}

Axios.js

function sendData(data){
    const formData = new FormData();
    formData.set('name', `${data.name}`);
    formData.set('email', `${data.email}`);
    formData.set('score', `${data.score}`);
    formData.set('group', `${data.group}`);
    formData.set('school', `${data.school}`);
    formData.set('genre', `${data.genreName}`);



    return axios({
        method: 'post',
        url: `${process.env.REACT_APP_POST_URL}`,
        data: formData,
        headers: {'Content-Type': 'multipart/form-data' }
    }).then((data)=>{
        console.log(data);
    })

}

emailData.php

<?php
if(isset($_POST['email'])) {
    PRINT($_POST);
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "robin.john.in@gmail.com";
    $email_subject = "A new score submission";
 
        
 
    $name = $_POST['name']; 
    $email_from = $_POST['email']; 
    $score = $_POST['score'];
    $genre = $_POST['genre'];
    $school = $_POST['school'];
    $group = $_POST['group'];
 
    
 
    $email_message = "Game Submission details below.\n\n";
 
     
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
 
     
 
    $email_message .= "Name: ".clean_string($name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Score: ".clean_string($score)."\n";
    $email_message .= "Genre: ".clean_string($genre)."\n";
    $email_message .= "School: ".clean_string($school)."\n";
    $email_message .= "Group: ".clean_string($group)."\n";
 
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
 
} else {
    print("Error in data")
}
?>

这就是我现在忙的代码。

我提交表单，在开发工具的网络选项卡中看到数据
我得到一个错误Failed to load resource: the server responded with a status of 500 ()
并且没有发送电子邮件。

在此先感谢您帮助我。

Answer 1

500 响应代码是服务器错误，因此您的请求确实到达了服务器但无法处理。您需要查看服务器 (php) 日志。

Answer 2

我猜这是由于 php 邮件程序可能无法访问发件人电子邮件权限。查看允许使用第三方的 gmail 权限。

如何使用 Axios 将 ReactJs 中的表单提交给 PHP 处理程序（PHP miler 以电子邮件形式发送数据）？

How to submit a form in ReactJs to a PHP handler (PHP miler to email form data) with Axios?

php

forms

phpmailer

reactjs

axios