形式

Question

我试图在我的网站上找到一份工作联系表格，并且正在关注这篇文章guide。该指南提供了一个PHP脚本来处理帖子，但我使用的是create-react-app而且我不知道如何将mailer.php文件包含到项目中。

形式

   <form id="contact-form" name="c-form" method="post" action="mailer.php">
                                        <div className="input-field">
                                            <input
                                                id="first_name"
                                                type="text"
                                                className="validate"
                                                name="first_name"
                                                required/>
                                            <label for="first_name">Name</label>
                                        </div>
                                        <div className="input-field">
                                            <input id="sub" type="text" className="validate" name="sub"/>
                                            <label for="sub">Subject</label>
                                        </div>
                                        <div className="input-field">
                                            <input id="email" type="email" className="validate" name="email" required/>
                                            <label for="email">Email</label>
                                        </div>
                                        <div className="input-field">
                                            <textarea
                                                id="textarea1"
                                                className="materialize-textarea"
                                                name="message"
                                                required></textarea>
                                            <label for="textarea1">Message</label>
                                        </div>
                                        <div className="contact-send">
                                            <button
                                                id="submit"
                                                name="contactSubmit"
                                                type="submit"
                                                value="Submit"
                                                className="btn waves-effect">Send
                                            </button>
                                        </div>
                                    </form>

mailer.php

<?php

    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
                $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "jportorreal77@gmail.com";

        // Set the email subject.
        $subject = "New contact from $name";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

reactjs

componentDidMount() {

    var $form = $("#contact-form");
    var formData = $form.serialize();

    $form.submit(function (event) {
        // Stop the browser from submitting the form.
        event.preventDefault();

        // TODO
        $.ajax({
            type: 'POST',
            url: $form.attr('action'),
            data: formData,
            success: function (response) {
                console.dir(response);
            },
            fail: function (err) {
                console.dir(err);
            }
        });

    });

}

问题

每当我提交表格时，我都会得到一个

POST http://localhost:3000/mailer.php 404 (Not Found)

错误。我如何才能实现这一目标。

Answer 1

create-react-app是一款非常出色的软件，它可以帮助开发人员在不需要配置的情况下启动前端应用程序。但是，它没有php。

以下是如何使其发挥作用

您要做的第一件事就是尽量确保您运行的是php服务器。如果您需要帮助，请关注this tutorial。让我们说你设法让你的php页面在http://your-host/mail.php工作。
在访问http://your-host/mail.php以确保其后工作，发送数据异步

Answer 2

对于这个问题，我在本地主机（http://localhost:3000/post）上看到状态页面404，可以通过调用主机域的网站地址来解决。而且，您可以尝试以下两种方法之一： 1.使用Wamap，Xamp或其他具有Apache服务器的PHP（端口= 80）。在应用程序的package.json中必须添加行

"proxy":"http://localhost:80"

并可能从Php文件中添加一些CROS 2.使用Word Press中的系统，存在现有文件function.php，就像心脏一样。因为在React文件中无法插入php代码，但是php代码不会添加和来自public / index.html。但是在这种情况下，请尝试制作一些可以在react和php之间建立连接的Java脚本文件。无论如何，在开发时所有代码都必须同时运行两个服务器（react node和apache）。在Apache上最好的选择是使虚拟主机获得所有认可。制作一个htacces文件，就像内容一样

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

php的特殊文件夹，react应用程序的特殊文件夹。文件.htacces必须放在php文件夹中。希望如此，现在可以对我有所帮助。祝一切顺利

Answer 3

同时使用React和PHP时，最好的方法是在项目文件夹中创建两个文件夹。在另一个PHP中的一个应用程序响应中。您可以在学院站点https://www.academia.edu/37293567/Slanje_podataka_iz_React_apliakcije_preko_php_scripta_u_Json_fail_-Sending_data_from_React_to_php_script_in_Json_fail上的个人资料上查看代码。文本是用我的塞尔维亚语编写的，但是在代码中，您都必须自己说出来。但我会尽量缩短。首先，除了创建两个推子外，有必要通过使用端口80的代理来使数据毫不费力地通过端口，在PHP文件夹中设置.htaccess失败后，PHP会响应失败的package.json中的应用程序而工作在ademi的链接上执行此操作或将其覆盖我的PHP失败。当然，您可以更改输入字段的名称以及其他所需的名称。原则上，首先根据数据使用原理从已解码部分对json进行解码，该数据是从多个数据传输到从React应用程序的已解码接收子页面获得的一行数据中的每个数据中。因为众所周知，服务器工作是通过方法执行的。

如何在反应应用程序中包含一个PHP脚本

形式

mailer.php

reactjs

问题

3 个答案: