时间戳

首页 > 解决方案 > AJAX 不调用 PHP 文件

php - AJAX 不调用 PHP 文件

问题描述

我有一个联系我们表格，我正在尝试通过 AJAX 和 PHP 将表格数据发送到电子邮件地址。提交功能被成功触发，我收到了alert("success!");. 但是，似乎该form-process.php文件从未执行过-我从未收到过，echo "I have got this far";而且我当然也没有收到过电子邮件。我哪里错了？

有关信息，我有一个临时站点设置，因此文件已经托管在服务器上。

HTML

<div class="modal" id="contactModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Contact Us</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">
        <form action="form-process.php" method="POST" id="contact-form" role="form">
          <div class="form-group">
            <input type="text" class="form-control my-2" name="name" placeholder="Full Name" />
            <input type="email" class="form-control my-2" name="email" placeholder="Email Address" />
            <textarea type="text" class="form-control my-2" name="message" rows="4" name="message" placeholder="Write your message here..."></textarea>
          </div>
          <input type="submit" name="submit" value="Submit" id="submit" class="btn btn-primary" form="contact-form"></input>
        </form>
      </div>

      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

查询

$(document).ready(function() {
  $('#contact-form').submit(function(event) {
    console.log('this has fired');

    var formData = {
        'name'              : $('input[id=name]').val(),
        'email'             : $('input[id=email]').val(),
        'message'           : $('input[id=message]').val()
    };

    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "form-process.php",
        data: formData,
        success: function(msg){
            $("#contact-modal").modal('hide');
            alert("success!");
        },
        error: function(){
            alert("form post failed");
        }
    });
  });
});

PHP

<?php
$myemail = '<myemailaddress>';
if (isset($_POST['name'])) {
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $company = strip_tags($_POST['company']);

    echo "I have got this far";

    $to = $myemail;
    $email_subject = "Contact form submission: $name";
    $email_body = "You have received a new message. ".
        " Here are the details:\n Name: $name \n ".
        "Email: $email\n Company \n $company";
    $headers = "From: $myemail\n";
    $headers .= "Reply-To: $email";
    mail($to,$email_subject,$email_body,$headers);
}
?>

标签： phpjqueryhtmlajax

解决方案

您正在使用以下内容获取输入字段的值：

$('input[id=name]').val(),
$('input[id=email]').val(),
$('input[id=message]').val()

但是您的输入都没有id字段：

<input type="text" class="form-control my-2" name="name" placeholder="Full Name" />
<input type="email" class="form-control my-2" name="email" placeholder="Email Address" />
<textarea type="text" class="form-control my-2" name="message" rows="4" name="message" placeholder="Write your message here..."></textarea>
      </div>

因此，您可以使用它来获取这些值：

$(input[name="name"]).val();
$(input[name="email"]).val();
$(input[name="message"]).val();

推荐阅读