使用PHP和AJAX發送電子郵件表單

Question

我在我的網站上有聯系表格。 它會向電子郵件發送消息。 我嘗試在沒有使用AJAX的頁面重新加載的情況下執行此操作，但似乎AJAX不起作用：發送消息但頁面仍然重定向到call-form.php 。 我的代碼中有什么不對？ （包含jQuery）

HTML

<form name="freeCall" action="<?php bloginfo(template_url); ?>/mail/call-form.php" method="post" class="popover-form" id="free-call-form">  
    <label for="name1">Name</label><span class="pull-right close">&times;</span><input placeholder="Name" name="call-name" type="text" id="name1" >  
    <label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >    
    <input type="submit" value="Call me back" >       
</form>

PHP - call-form.php

<?
if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
        $to = 'test@gmail.com';
        $subject = 'Callback';
        $message = '
                <html>
                    <head>
                        <title>Call me back</title>
                    </head>
                    <body>
                        <p><b>Name:</b> '.$_POST['call-name'].'</p>
                        <p><b>Phonenum:</b> '.$_POST['phone'].'</p>                        
                    </body>
                </html>'; 
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
        $headers .= "From: Site <info@mail.com>\r\n"; 
        mail($to, $subject, $message, $headers); 
}
?>

JS

$(function () {    
      $("#free-call-form").submit(function () { 
        var form_data = $(this).serialize(); 
        $.ajax({
          type: "POST", 
          url: "call-form.php", 
          data: form_data,
          success: function () {
            alert("It's OK!");
          }
        });
      }); 
});

Answer 1

好的，首先當你進行AJAX調用時，你必須要知道你的PHP是否會返回一些東西（對於調試很有用）。

然后，當使用AJAX提交表單時，不需要標記action="" 。

最后，為了防止在進行AJAX調用時發送表單，請在此處添加名為e的事件的e.preventDefault() ，就像在我的示例中一樣。

我已經改進了您的代碼，使其更加符合最新標准。

HTML：

<form name="freeCall" method="post" class="popover-form" id="free-call-form">  
  <label for="name1">Name</label><span class="pull-right close">&times;</span><input placeholder="Name" name="call-name" type="text" id="name1" >  
  <label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >    
  <input type="submit" value="Call me back" >

JS：

$(function () {    
  $("#free-call-form").submit(function (e) {
    e.preventDefault();
    var form_data = $(this).serialize(); 
    $.ajax({
      type: "POST", 
      url: "call-form.php",
      dataType: "json", // Add datatype
      data: form_data
    }).done(function (data) {
        console.log(data);
        alert("It's OK!");
    }).fail(function (data) {
        console.log(data);
    });
  }); 
});

和PHP：

if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
  $to = 'test@gmail.com';
  $subject = 'Callback';
  $message = '
        <html>
            <head>
                <title>Call me back</title>
            </head>
            <body>
                <p><b>Name:</b> '.$_POST['call-name'].'</p>
                <p><b>Phonenum:</b> '.$_POST['phone'].'</p>                        
            </body>
        </html>'; 
  $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
$headers .= "From: Site <info@mail.com>\r\n"; 
mail($to, $subject, $message, $headers);

  echo json_encode(array('status' => 'success'));
} else {
  echo json_encode(array('status' => 'error'));
}

使用echo json_encode ，您知道AJAX調用的返回值。 這個比較好

Answer 2

您沒有阻止默認的提交操作 -

$("#free-call-form").submit(function (event) { // capture the event
    event.preventDefault();  // prevent the event's default action

Answer 3

返回false或阻止事件的默認行為應該適合您。

舊的.submit（）示例，現在是.on（'eventName'）的別名; 並使用return false來避免表單提交。

 $("#free-call-form").submit(function () { 
    var form_data = $(this).serialize(); 
    $.ajax({
        type: "POST", 
        url: "call-form.php", 
        data: form_data,
        success: function () {
          alert("It's OK!");
      }
    });
    return false;
});

使用.on（'eventName'）並使用e.preventDefault（）來避免表單提交的示例。

$("#free-call-form").on('submit', function (e) { 
    e.preventDefault();
    var form_data = $(this).serialize(); 
    $.ajax({
        type: "POST", 
        url: "call-form.php", 
        data: form_data,
        success: function () {
          alert("It's OK!");
      }
    });
});

來自Jquery .submit（）文檔：此方法是第一個變體中的.on（“submit”，handler）和第三個變體中的.trigger（“submit”）的快捷方式。

此外，您會考慮不直接使用EVER用戶輸入，它不會在這個確切的上下文中引起問題（或者可能是）但是根據您的實際方法，他們可以更改郵件標記或在那里添加一些奇怪的東西，甚至是腳本，你會考慮逃避，驗證或限制它。

正如zLen在評論中指出的那樣：

表單標記中的操作不是必需的，因為您沒有使用它，您可以刪除它：

action="<?php bloginfo(template_url); ?>/mail/call-form.php"

Answer 4

發生的事情是你的表單正在提交，實際上並不是正在進行的AJAX調用。 要修復它，請添加

return false;

在submit函數的末尾，以便瀏覽器不提交表單並且AJAX調用正確發生。

使用PHP和AJAX發送電子郵件表單

問題描述

4 個解決方案

解決方案1
6 已采納 2015-05-27 21:17:08

解決方案2
4 2015-05-27 21:04:50

解決方案3
2 2015-05-27 21:08:06

解決方案4
1 2015-05-27 21:03:51

使用PHP和AJAX發送電子郵件表單

問題描述

4 個解決方案

解決方案1 6 已采納 2015-05-27 21:17:08

解決方案2 4 2015-05-27 21:04:50

解決方案3 2 2015-05-27 21:08:06

解決方案4 1 2015-05-27 21:03:51

解決方案1
6 已采納 2015-05-27 21:17:08

解決方案2
4 2015-05-27 21:04:50

解決方案3
2 2015-05-27 21:08:06

解決方案4
1 2015-05-27 21:03:51