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.preventDefault()的事件e，就像我的示例一样。

我已经改进了您的代码，使其更加符合最新标准。

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的别名（＆＃39; eventName＆＃39;）;并使用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（＆＃39; eventName＆＃39;）并使用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（＆＃34;提交＆＃34;，处理程序）＆gt;和.trigger（＆＃34;提交＆＃34; ）在第三个。

另外，你会考虑不直接使用EVER用户输入，它不会在这个确切的上下文中引起问题（或者可能是）但是根据你的实际方法，他们可以改变邮件标记或在那里添加一些奇怪的东西，甚至脚本，你会考虑逃避，验证或限制它。

正如zLen在评论中所指出的那样：

表单标记中的操作不是必需的，因为您没有使用它，您可以删除它：

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

Answer 4

正在发生的是您的表单正在提交，实际上并不是正在进行的AJAX调用。要解决此问题，请添加

return false;

在submit函数的末尾，以便浏览器不提交表单并且AJAX调用正确发生。

使用PHP和AJAX发送电子邮件表单

4 个答案: