2017-10-16 133 views
0

我试图在我的网站上获取工作联系人窗体,并且正在关注本文的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)

错误。我如何得到这个工作。

+0

其中'网址:<本地的PHP脚本>'是,包括相对途径它位于哪里的代码库。 – fungusanthrax

+0

相对路径应该是'〜/ mailer.php',但我不知道如何获取项目中包含的文件'mailer.php'。 –

+1

这个php不应该包含在项目中。它可能在不同的服务器和端口上运行。您可以使用内置的php服务器进行本地测试:http://php.net/manual/en/features.commandline.webserver.php。 –

回答

1

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

这里是你如何使它工作

  1. ,你所要做的就是尽量保证你有一个PHP的服务器上运行的第一件事。如果您需要帮助,请按照this tutorial。假设你设法让你的php页面工作在http://your-host/mail.php

  2. 访问过http://your-host/mail.php以确保其 工作后,将数据发送异步

相关问题