联系表单 Ajax、php、Jquery：

Question

我正在尝试使用 Ajax、php 和 Jquery 为我的上一个学习项目（具有 mvc 架构的 php）制作联系表格。 我对此有一些疑问：

• 我的联系方式没问题：我收到电子邮件！ 但是即使我使用$.ajax()我也不确定这是否真的是 Ajax 请求，因为在我的终端中没有 XHR 请求......
• 我想在发送电子邮件时显示一条消息，例如“感谢您的消息”，但该消息仅显示一秒钟，并且页面会刷新，因此所有信息都已清除。 我e.preventDefault()使用e.preventDefault()但是当我使用它时，我没有收到电子邮件。

感谢您的回答并提供帮助。

联系方式：

<section class="form_container">
        <form class="contact_form" id="contact_form" method="post" action="index.php?action=contact"> 
            <input class="firstname form" type="text" name="firstname" placeholder="Nom" id="firstname" required>
            <span class="error-message"></span><br/>
            <input class="lastname form" type="text" name="lastname" placeholder="Prénom" id="lastname" required>
            <span class="error-message"></span><br/>
            <input class="email form" type="text" name="email" placeholder="Email" id="email" required>
            <span class="error-message"></span><br/>
            <input class="object form" type="text" name="object" placeholder="Objet" id="object" required>
            <span class="error-message"></span><br/>
            <textarea class="content form" name="content" placeholder="Votre message" id="content" cols="30" rows="10" required></textarea>
            <span class="error-message"></span><br/>
            <input class="envoyer form" type="submit" name="submit" value="Envoyer" id="submit"><br/>
        </form>
        <div id="msg-ok">Merci. Votre message a bien été envoyé.</div>
        <div id="msg-notok">Merci de renseigner correctement tous les champs .</div>

    </section>

contact_form.js：

// send messages with Ajax
    'use strict';
    $('#contact_form').submit(function() {

        nom = $(this).find("#firstname").val();
        prenom = $(this).find("#lastname").val();
        email = $(this).find("#email").val();
        object = $(this).find("#object").val();
        message = $(this).find("#content").val();

        $.ajax({
            type: "POST",
            data: { 
                nom:nom, 
                prenom:prenom, 
                email:email, 
                object:object, 
                content:content 
            },
            url: 'http://www.projet-5.pauline-superweb.com/index.php?action=contact',
            success: function(data) {
                $("#contact_form").hide();
                $('#msg-ok').fadeIn();  
            },
            error: function() {
                $('#msg-notok').fadeIn();
            }
        })
    });
});

我的控制器中的 php 代码：

function contact()
{
    if (isset($_POST['submit'])) {

        $e = array();
        $e['error'] = "Formulaire non valide";

        if(isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['object']) && isset($_POST['content']) && !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $e['email_invalide'] = "email_invalide";
        } else {
            $e['error'] = 'Ok';
            $nom = $_POST['firstname'];
            $prenom = $_POST['lastname'];
            $email = $_POST['email'];
            $object = $_POST['object'];
            $content = $_POST['content'];

            $to = 'contact.super.web@gmail.com';
            $sujet = $object;
            $message = $content;
            $headers = 'From ' . $nom . ' ' . $prenom . ' ' . $email;
            mail($to, $sujet, $message, $headers);
        } 
    } 

    ob_start();
    include('views/frontend/site/contactView.php');
    $content = ob_get_clean();
    require("views/frontend/site/template.php");
}

Answer 1

改变这个

<input class="envoyer form" type="submit" name="submit" value="Envoyer" id="submit">

到

<input class="envoyer form" type="button" name="submit" value="Envoyer" id="submit">

和改变

$('#contact_form').submit(function() {
to 
$('#submit').click(function() {