如何在React App中包含php脚本 [英] How to include a php script in react app
问题描述
我正在尝试在我的网站上获得一份有效的联系表，并且正在关注本文的指南.该指南提供了一个php脚本来处理帖子，但是我使用的是create-react-app，并且我不知道如何将mailer.php文件包含到项目中.
I'm trying to get a working contact form on my website and am following this article's guide. The guide gives a php script to handle the post, but I'm using a create-react-app and I don't know how to include the mailer.php file into the project.
<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);
}
});
});
}
问题
每当我提交表格时，我都会得到一个
problem
whenever I submit the form I get a
POST http://localhost:3000/mailer.php 404 (Not Found)
错误.我该如何工作.
推荐答案
create-react-app是一款了不起的软件，它可以帮助开发人员启动几乎不需要配置的前端应用程序.但是，它没有php.
create-react-app is an amazing piece of software which helps developers start up a front-end application with little need for configuration. However, it does not have php with it.
这是使它工作的方式
-
您要做的第一件事是尝试确保您正在运行php服务器.如果您需要帮助，请遵循本教程.假设您设法在
访问
After having visited http://your-host/mail.php to ensure its working, send the data async
这篇关于如何在React App中包含php脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
