在同一个文件中使用 HTML、PHP 和 Ajax

Question

大家早上好，作为重新学习网络编程的尝试，我正在尝试在一个自包含的 html 文件中制作一个简单的邮件表单，所以没有包含，没有使用 HTML php 和 Ajax 的外部引用。关键是制作一个独立的html，提交表单时不会刷新。

我的html表单如下：

<form class="form2" action="" method="POST" name="myForm" id="myForm">
<div class="formtitle">Inscrivez-vous à notre infolettre</div>
<div class="input">
<div class="inputtext">Nom: </div>
<div class="inputcontent">
<input type="text" name="name" id="name" />
</div>
</div>
<div class="input">
<div class="inputtext">Courriel: </div>
<div class="inputcontent">
<input type="text" name="email" id="email" />
</div>
</div>
<div class="buttons"> <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
<input class="greybutton" type="submit" value="Inscrivez-moi" />
</div>
</form>

然后我让我的 Ajax 监听提交按钮 clic：

<script>
$(document).ready(function(){
$('#myForm').on('submit',function(e) {

$.ajax({
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000); //=== Show Success Message==
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
</script>

最后我得到了典型的邮件 php 代码：

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = "Veuillez m'ajouter à votre newsletter";
$formcontent="From: $name \n Message: $message";
$recipient = "myMail@MyDomain.com";
$subject = "Newsletter";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>

由于某种原因，它似乎永远不会到达 php，因为没有发送邮件或成功/错误消息。我反复检查了所有传递的参数，一切看起来都井井有条。

感谢您抽出宝贵时间分享您的知识！

Answer 1

将您的 PHP 代码放在另一个名为 api_newsletter.php 的页面中

通过以下方式更改您的 PHP 代码：

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = "Veuillez m'ajouter à votre newsletter";
    $formcontent="From: $name \n Message: $message";
    $recipient = "myMail@MyDomain.com";
    $subject = "Newsletter";
    $mailheader = "From: $email \r\n";

    if(mail($recipient, $subject, $formcontent, $mailheader)){
        echo json_encode(array('success' => true)); 
    }else {
        echo json_encode(array('success' => false)); 
    }
?>

然后在你的 ajax 代码中简单地做：

<script>
$(document).ready(function(){

  $('#myForm').on('submit',function(e) {

    $.ajax({
        data:$(this).serialize(),
        type:'POST',
        url : '/api_newsletter.php',
        success:function(data){

            console.log(data);
            var rsp = $.parseJSON (data)

            if(rsp["success"] == true){

                $("#success").show().fadeOut(5000); //=== Show Success Message==

            }else {

                $("#error").show().fadeOut(5000); //===Show Error Message====

            } 
        },
        error:function(data){

                $("#error").show().fadeOut(5000); //===Show Error Message====

        }
    });

    e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===

  });

});
</script>