在同一頁面中提交表單時顯示ajax成功或錯誤消息

Question

我有一個簡單的html表單，我將在其中發送郵件，還有一個名為ajax-form-submit.php的文件，該文件將在其中執行。 現在，我想通過ajax在html文件中顯示成功或失敗消息。 所以我的jQuery的html形式是這樣的

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
  First Name: <input type="text" name="fname" value ="Ravi"/> <br/>
  Last Name: <input type="text" name="lname" value ="Shanker" /> <br/>
  Email : <input type="text" name="email" value="xx@xxx.com"/> <br/>
  <input type="button"  id="simple-post" value="Run Code" name="submit"/>
</form>

<div id="simple-msg"></div>

<script>
jQuery(document).ready(function() {
  jQuery("#simple-post").click(function() {
    jQuery("#ajaxform").submit(function(e) {
      jQuery("#simple-msg").html("<img src='loading.gif'/>");
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax( {
          url : formURL,
          type: "POST",
          data : postData,
          success:function(data, textStatus, jqXHR) {
            jQuery("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');
          },
          error: function(jqXHR, textStatus, errorThrown) 
          {
          $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
          }
      });
      e.preventDefault();  //STOP default action
  });

  $("#ajaxform").submit(); //SUBMIT FORM
});

});
</script>

現在郵件將發送到的php文件將如下所示

<?php
if (isset($_POST['submit'])) { 
  $name = $_POST['name'];
  $lname = $_POST['lname'];
  $email = $_POST['email'];
  $ToEmail = 'test@demo.com';
  $MESSAGE_BODY = "Name: ".$_POST["name"]."<br>"; 
  $MESSAGE_BODY .= "Email: ".$_POST["email"]."<br>";
  $mail = mail($ToEmail, $MESSAGE_BODY);
  if($mail) {
    echo "Mail sent successfully";
  }
  else {
    echo "oops there is some error";
  }
  }
?>

我希望成功消息或錯誤消息應顯示在html頁面中。 它只顯示任何消息都寫在if (isset($_POST['submit'])) {函數之外，但是這樣做不能顯示成功消息或錯誤消息。 那么有人可以告訴我該怎么做嗎？ 任何幫助都是非常可觀的。 謝謝。

Answer 1

HTML

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
    First Name: <input type="text" name="fname" id="fname" value ="Ravi"/> <br/>
    Last Name: <input type="text" name="lname" id="lname" value ="Shanker" /> <br/>
    Email : <input type="text" name="email" id="email"  value="xx@xxx.com"/> <br/>
    <input type="button"  id="simple-post" value="Run Code" name="submit"/>
</form>
<div id="simple-msg"></div>

<script type="text/javascript">

jQuery("#simple-post").click(function() {

    jQuery("#simple-msg").html("<img src='loading.gif'/>");        
    var formURL = $(this).attr("action");
    var fname = $("#fname").val();
    var lname = $("#lname").val();
    var email = $("#email").val();
    $.ajax({
        url : formURL,
        type: "POST",
        data : {
            aFname: fname,
            aLname: lname,
            aEmail: email,
            aSubmit:"submit"
               },
        success:function(data, textStatus, jqXHR) {
            jQuery("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');
        },
        error: function(jqXHR, textStatus, errorThrown){
            $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
        }
    });
});
</script>

PHP

if (isset($_POST['aSubmit'])) {
    $name = $_POST['aFname'];
    $lname = $_POST['aLname'];
    $email = $_POST['aEmail'];
    $ToEmail = 'test@demo.com';
    $MESSAGE_BODY = "Name: ".$_POST["aFname"].' '.$_POST["aLname"]."<br/>"; 
    $MESSAGE_BODY .= "Email: ".$_POST["aEmail"]."<br/>";
    $mail = mail($ToEmail, $MESSAGE_BODY);
    if($mail) {
        echo "Mail sent successfully";
    }
    else{
        echo "oops there is some error";
    }
}

注意 ：_ 我想在這里提及，我沒有在這里采取任何措施來防止SQL注入或任何其他形式的漏洞預防，因為這會增加您的復雜性。 但是，請確保在將此類代碼發布到活動網站之前，您已盡一切努力阻止了您的網站。 _

Answer 2

我建議使用JSON（使用PHP json_encode（））將狀態（成功或錯誤）發送回客戶端。 為此，您還需要使用JQuery腳本在頁面中添加JSON偵聽器。