Javascript 通过电子邮件发送表单数据并显示消息，无需刷新或更改页面

我有这个表单，它工作得很好，但当提交/失败时，它会切换到另一个页面，显示消息

HTML

---

我只想在点击“发送”按钮后在

if/else

下显示消息，不需要刷新，我认为可以用JQuery/Vanilla完成，但我没有任何线索。JS如何知道表单是否已成功提交？我如何告诉JS在哪里插入消息？

我的评论更进一步，因为在这么小的空间里很难解释：

page1.php

if(isset($_POST['submit'])){
    $to = "email@gmail.com"; // email destinatario
    $from = $_POST['email']; // email del cliente
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $mes = $_POST['message'];
    $subject = "Formulario web";
    $subject2 = "Copia de su formulario de consulta";
    $message = $name . " con número de teléfono: " . $phone . " escribió lo siguiente:" . "\n\n" . $_POST['message'];
    $message2 = "Aquí tiene una copia de su mensaje " . $name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    $success = (preg_match("/^[0-9]{9}$/",$phone) && preg_match("/^[a-zA-Z]*$/",$name) && $mes!='' && filter_var($from, FILTER_VALIDATE_EMAIL));

    if ($success){
        mail($to,$subject,$message,$headers);
        mail($from,$subject2,$message2,$headers2); // copia para el cliente
        echo "Formulario enviado. Muchas gracias " . $name . ", en breve contactaremos con usted.";
    }
    else {
        echo "Lo sentimos, se ha producido un error al enviar el formulario, revise su contenido y vuelva a intentarlo.";
    }}

    <!-- Name the form myform as an id -->
    <form action="page2.php" method="post" id="myform">
        <label>Nombre </label>
        <input type="text" name="name"><br>
        <label>Email</label> 
        <input type="text" name="email"><br>
        <label>Teléfono</label> 
        <input type="text" name="phone"><br>
        <label>Mensaje</label>
        <textarea name="message"></textarea><br>
        <input id="submit" type="submit" name="submit" value="Enviar">
    </form>
    <!-- Invisible response container -->
    <div id="response"></div>
<script>
    $("#myform").submit(function() {
        $.ajax({
                 // PHP page  
                 url : 'page2.php',
                 // Takes all data from form
                 data: $("#myform").serialize(),
                 // Puts response into the container
                 success: function(response) {
                    $("#response").html(response);
                 }
        });    
        // This stops the page from reloading on submit
        return false;
    });
</script>

if(isset($_POST['submit'])){
    $to = "email@gmail.com"; // email destinatario
    $from = $_POST['email']; // email del cliente
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $mes = $_POST['message'];
    $subject = "Formulario web";
    $subject2 = "Copia de su formulario de consulta";
    $message = $name . " con número de teléfono: " . $phone . " escribió lo siguiente:" . "\n\n" . $_POST['message'];
    $message2 = "Aquí tiene una copia de su mensaje " . $name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    $success = (preg_match("/^[0-9]{9}$/",$phone) && preg_match("/^[a-zA-Z]*$/",$name) && $mes!='' && filter_var($from, FILTER_VALIDATE_EMAIL));

    if ($success){
        mail($to,$subject,$message,$headers);
        mail($from,$subject2,$message2,$headers2); // copia para el cliente
        echo "Formulario enviado. Muchas gracias " . $name . ", en breve contactaremos con usted.";
    }
    else {
        echo "Lo sentimos, se ha producido un error al enviar el formulario, revise su contenido y vuelva a intentarlo.";
    }
}

---

可能是复制错误，但您的

if（isset（$\u POST['submit']）{

上有语法错误。您没有关闭

}

@Rasclatt是的，这是一个复制错误，谢谢。请使用您提到的jQuery AJAX。第1页有表单和jQuery。第2页有脚本的执行。在jQuery中，您可以指定一个占位符来返回第2页脚本的成功或失败（如div或span或其他内容）@Rasclatt，因此我应该从.php中删除两个echo，并使用jQuery显示消息，可能是在一个空div中？JQuery如何知道表单是否成功提交？当我点击提交按钮时，它显示一个空页面，只有成功/失败消息，我如何避免这种情况？谢谢，很抱歉问了这么多问题。很抱歉，我现在做了一些小改动。有一些微小的（但重要的）文本错误。

if(isset($_POST['submit'])){
    $to = "email@gmail.com"; // email destinatario
    $from = $_POST['email']; // email del cliente
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $mes = $_POST['message'];
    $subject = "Formulario web";
    $subject2 = "Copia de su formulario de consulta";
    $message = $name . " con número de teléfono: " . $phone . " escribió lo siguiente:" . "\n\n" . $_POST['message'];
    $message2 = "Aquí tiene una copia de su mensaje " . $name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    $success = (preg_match("/^[0-9]{9}$/",$phone) && preg_match("/^[a-zA-Z]*$/",$name) && $mes!='' && filter_var($from, FILTER_VALIDATE_EMAIL));

    if ($success){
        mail($to,$subject,$message,$headers);
        mail($from,$subject2,$message2,$headers2); // copia para el cliente
        echo "Formulario enviado. Muchas gracias " . $name . ", en breve contactaremos con usted.";
    }
    else {
        echo "Lo sentimos, se ha producido un error al enviar el formulario, revise su contenido y vuelva a intentarlo.";
    }
}