提交表單什么都不做

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環境的頁面，因此它被取消。

---

你應該：

1. 確保表單的非 JS 提交是正確的。 請參閱不顯眼的 JavaScript
2. 如果 JS 運行成功，停止默認表單提交行為：

這樣的

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

Answer 2

您應該添加event.preventDefault(); 在提交處理程序的開頭，以防止默認提交操作。

作為獎勵，您應該添加一個表單操作屬性，因為它在技術上是必需的：

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

編輯： HTML4 中必需，HTML5 中可選