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

Question

大家早上好，为了重新学习网络编程，我试图在一个自包含的html文件中制作一个简单的邮件表单，所以没有包含，没有外部引用使用HTML和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侦听提交按钮循环：

<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>

最后，我有了典型的mail 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>