如何在反应应用程序中包含php脚本
问题描述:
我试图在我的网站上获取工作联系人窗体,并且正在关注本文的guide。该指南给出了一个php脚本来处理帖子,但是我正在使用create-react-app,并且我不知道如何将mailer.php
文件包含到项目中。如何在反应应用程序中包含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 = "[email protected]";
// 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)
错误。我如何得到这个工作。
答
create-react-app是一款非常棒的软件,它可以帮助开发人员在几乎不需要配置的情况下启动前端应用程序。但是,它没有与它的PHP。
这里是你如何使它工作
,你所要做的就是尽量保证你有一个PHP的服务器上运行的第一件事。如果您需要帮助,请按照this tutorial。假设你设法让你的php页面工作在http://your-host/mail.php。
访问过http://your-host/mail.php以确保其 工作后,将数据发送异步
其中'网址:'是,包括相对途径它位于哪里的代码库。 – fungusanthrax
相对路径应该是'〜/ mailer.php',但我不知道如何获取项目中包含的文件'mailer.php'。 –
这个php不应该包含在项目中。它可能在不同的服务器和端口上运行。您可以使用内置的php服务器进行本地测试:http://php.net/manual/en/features.commandline.webserver.php。 –