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

时间:2014-10-24 16:09:50

标签: php html ajax

早上好大家作为尝试重新学习网络编程我试图在一个自包含的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,因为没有发送邮件或成功/错误消息。我加倍并且三倍检查了所有传递的参数,一切看起来都是有序的。

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

1 个答案:

答案 0 :(得分: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>