Question

这是我用来将表单发送到php页面然后发送电子邮件的代码。不知何故它不起作用，我不明白为什么。该页面只是重新加载（为什么？），我看不到正在发送任何请求。（如果这是有用的信息，则在macOS上使用MAMP）。怎么了谢谢你帮我 PS：同样，当我单击提交时，页面会重新加载。为什么以及如何防止这种情况？

HTML

         <div id="form_container">
          <form id="contact_form" enctype="multipart/form-data">
            <div class="form-group">
              <div class="row">
                <div class="col">
                  <input name="name" type="text" class="form-control" placeholder="Name" id="inputName">
                </div>
                <div class="col">
                  <input name="surname" type="text" class="form-control" placeholder="Surname" id="inputSurname">
                </div>
              </div>
            </div>
            <div class="form-group">
              <input name="email" type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
            <br/>
            <div class="form-group">
              <input name="subject" type="text" class="form-control" id="inputSubject" placeholder="Subject">
            </div>
            <div class="form-group">
              <textarea name="message" class="form-control" id="textArea" rows="4" placeholder="Write your message here"></textarea>
            </div>
            <div id="btn_container">
              <button id="btn_send" name="submit" type="submit" class="btn btn-dark">SEND</button>
              <div id="success_send" class="alert alert-success" role="alert">
                SUCCESS
              </div>
              <div id="error_send" class="alert alert-danger" role="alert">
                ERROR
              </div>
            </div>
          </form>
        </div>

JS

$( document ).ready(function() {

  $('#contact_form').submit(function(event) {
    $.ajax({
      type: 'POST',
      url: '../php/email.php',
      data: $('#contact_form').serialize(),
      success: function() {
        $('#success_send').show();
      },
      error: function(){
        $('#error_send').show();
      }
    });
  });

});

PHP

<?php
if($_POST){
  $name = $_POST['name'];
  $surname = $_POST['surname'];
  $email = $_POST['email'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];

  $to = "xxxxxx@xxxx.xxx";
  $subject = "Portfolio Mail - ".$subject;
  $body = "Name: ".$name."\t".$surname."\nEmail: ".$email."\nMessage: ".$message;
  $headers = "From: " . $email;

//send email
mail($to, $subject, $body, $headers);
?>

Answer 1

页面刚刚重新加载（为什么？）

因为您要提交表单。

数据被发送到action中指定的URL（默认值：当前页面），结果被加载为新页面。

，我看不到任何请求被发送。

submit事件处理程序在表单提交发生之前运行，这使HTTP请求排队。然后，浏览器立即离开页面，该页面杀死了请求所属的JS环境，因此该页面被取消了。

您应该：

确保非JS提交的表单“做正确的事”。参见Unobtrusive JavaScript
如果JS成功运行，请停止默认的表单提交行为：

这样

$('#contact_form').submit(function(event) {
    event.preventDefault();
    $.ajax({

Answer 2

您应在提交处理程序的开头添加event.preventDefault();，以防止执行默认的提交操作。

作为奖励，您应该添加form action attribute，因为它在技术上是必需的：

<form id="contact_form" action="../php/email.php" enctype="multipart/form-data">

编辑：Required in HTML4, optional in HTML5

提交表格时不做任何事情

2 个答案: