在本地主机上找不到联系表格答案

【问题标题】：Contact form not found on localhost在本地主机上找不到联系表格
【发布时间】：2017-05-04 13:51:53
【问题描述】：

当我从我的联系表单发送消息时收到以下错误：

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

我不确定这是否与我的文件结构或尝试在本地主机上发布有关。

我检查的东西：

form 有method="post"。
ajax 请求是 type: POST
inputs 有name='something'
页面在localhost:3000 上正常运行

我需要解决什么问题？

这是我的应用程序的结构：

app.js：

const
    express = require('express'),
    app = express(),
    logger = require('morgan'),
    bodyParser = require('body-parser')

// environment port
const port = process.env.PORT || 3000

app.use(express.static(process.env.PWD + '/client'))
app.use(logger('dev'))
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

app.get('/', (req, res) => {
  res.render('index')
})

app.listen(port, (err) => {
  console.log(err || 'listening on port ' + port)
})

这是client/js/contact_me.js中的ajax请求：

        $.ajax({
            url: "../../mail/contact_me.php",
            type: "POST",
            data: {
                name: name,
                phone: phone,
                email: email,
                message: message
            },
            cache: false,
            success: function() {
                // Enable button & show success message
                $("#btnSubmit").attr("disabled", false);
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                // $('#contactForm').trigger("reset");
            },
        });

邮件/contact_me.php：

<?php
// Check for empty fields
if(empty($_POST['name'])        ||
   empty($_POST['email'])       ||
   empty($_POST['phone'])       ||
   empty($_POST['message']) ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false;
   }

$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));

// Create the email and send the message
$to = 'myemail@gmail.com'; 
$email_subject = "Website Contact Form:  $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

这是client/index.html中的表格：

<form name="sentMessage" method="post" id="contactForm" novalidate>
    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <label for="name">Name</label>
            <input name="name" type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <label for="email">Email Address</label>
            <input name="email" type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <label for="phone">Phone Number</label>
            <input name="phone" type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <label for="message">Message</label>
            <textarea name="message" rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <br>
    <div id="success"></div>
    <div class="row">
        <div class="form-group col-xs-12">
            <button type="submit" class="btn btn-success btn-lg">Send</button>
        </div>
    </div>
</form>

【问题讨论】：

你能在浏览器中浏览到“localhost:3000/mail/contact_me.php”吗？
否：Cannot GET /mail/contact_me.php%22
只是为了对您的 ajax 调用 url 感兴趣：“../../mail/contact_me.php”只需将其指向“contact_me.php”，而不需要目录部分。然后将“contact_me.php”文件复制到您提交它的索引目录。然后检查它是否有效。
另外，调用 ajax 时，在 chrome 中查看控制台日志，看看它给出了什么错误。
我使用 Node.js 的 nodemailer 模块解决了这个问题。使它非常简单。谢谢

标签： php node.js localhost contact-form

【解决方案1】：

我通过使用nodemailer 模块找到了解决方案。

npm install --save nodemailer

所有代码都在app.js：

const
    express = require('express'),
    app = express(),
    logger = require('morgan'),
    bodyParser = require('body-parser'),
    nodemailer = require('nodemailer')

// environment port
const port = process.env.PORT || 3000

app.use(express.static(process.env.PWD + '/public'))

app.use(logger('dev'))
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

app.get('/', (req, res) => {
  res.sendFile("./index.html", {root: __dirname})
})

app.post('/contact', (req, res) => {
  console.log("The request body is: ");
  console.log(req.body);

  var transporter = nodemailer.createTransport({
      service: 'Gmail',
      auth: {
          user: 'your_email@gmail.com', // Your email id
          pass: 'your_password' // Your password
      }
  });

  var mailOptions = {
      from: req.body.email,
      to: 'your_email@gmail.com',
      subject:'Email through contact form',
      text: 'Email: ' + req.body.email + '\nPhone: ' + req.body.phone + '\nMessage: ' + req.body.message
  };

  transporter.sendMail(mailOptions, function(error, info){
      if(error){
          console.log(error);
          res.json({failure: 'error'});
      }else{
          console.log('Message sent: ' + info.response);
          res.json({
            "success": 'Your message was sent',
            "next steps": "I will respond to your email shortly"
          });
      };
  });
});

app.listen(port, (err) => {
  console.log(err || 'listening on port ' + port)
});

【讨论】：