javascript - 新人 : ajax form not working

Question

我是 ajax/js/php 新手。我有一个小的联系表

<form id="contact-form" method="post" action="process.php" role="form">
    <div class="messages"></div>
    <div class="form-group">
        <label for="form_name">First name *</label>
        <input id="form_firstname" type="text" name="name" class="form-control" placeholder="Please enter your first name *" required="required" data-error="Firstname is required.">
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="form_lastname">Last name *</label>
        <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your last name *" required="required" data-error="Lastname is required.">
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="form_email">Email *</label>
        <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="form_phone">Phone</label>
        <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
        <div class="help-block with-errors"></div>
    </div>
    <p><strong>*</strong> These fields are required.</p>
</form>
<button type="submit" class="btn btn-info" value="Create Account">Create Account</button>

使用小型 js 和 php

脚本.js

$("#contact-form").submit(function(event) {
    // cancels the form submission
    "use strict";
    event.preventDefault();
    submitForm();
});

function submitForm() {
    // Initiate Variables With Form Content
    "use strict";
    var firstname = $("#form_firstname").val();
    var lastname = $("#form_lastname").val();
    var email = $("#email").val();
    var phone = $("#phone").val();

    $.ajax({
        type: "POST",
        url: "process.php",
        data: "name=" + firstname + lastname + "&email=" + email + "&phone=" + phone,
    });
}

process.php

<?php
    $name = $_POST["name"];
    $email = $_POST["email"];
    $phone = $_POST["phone"];

    $EmailTo = "name@email.com";
    $Subject = "New Message Received";

    // prepare email body text
    $Body .= "Name: ";
    $Body .= $name;
    $Body .= "\n";

    $Body .= "Email: ";
    $Body .= $email;
    $Body .= "\n";

    $Body .= "Phone: ";
    $Body .= $phone;
    $Body .= "\n";

    // send email
    $success = mail($EmailTo, $Subject, $Body, "From:".$email);

    // redirect to success page
    if ($success){
        echo "success";
    } else {
        echo "invalid";
    } 
?>

由于某种原因，它没有按照我想要的方式工作，没有向我发送电子邮件(我知道将我的电子邮件放在 $Emailto 中)。我经常只使用 php 表单，但我想避免重新加载页面。我试图理解我在哪里犯了错误。

Answer 1

$('#contact-form').submit(function(e){
 e.preventDefault();
 $.ajax({
  type: "POST",
  url: "process.php",
  data:$(this).serialize(), //get form values
 }).done(function(data){
  console.log(data);  // will contain success or invalid 
 });
});