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

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

javascript php jquery ajax forms

Javascript 使用PHP和AJAX发送电子邮件表单,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我在我的网站上有联系方式。它将消息发送到电子邮件。我尝试在不使用AJAX重新加载页面的情况下执行此操作，但AJAX似乎不起作用：虽然发送了消息，但页面仍然重定向到call form.php。我的代码中有什么不正确？（包括jQuery） HTML <form name="freeCall" action="<?php bloginfo(template_url); ?>/mail/call-form.php" method="post" class="popover-form"

我在我的网站上有联系方式。它将消息发送到电子邮件。我尝试在不使用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>

所发生的事情是表单正在提交，实际上并不是AJAX调用在进行提交。要修复它，请添加

return false;

在

submit

功能结束时，浏览器不会提交表单，AJAX调用也会正常进行。

您没有阻止默认提交操作-

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

返回false或防止事件的默认行为应该对您有用

例如old.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( “提交”）在第三页

此外，你会考虑不直接使用用户输入，它不会在这个精确的上下文中产生问题（或者可能是），但是用你的实际方法，他们可以改变邮件标记或添加一些奇怪的东西，甚至脚本，你会考虑逃避、验证或限制它。正如兹伦在评论中指出的那样：

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

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

action=“/mail/call form.php”

好的，首先，当您进行AJAX调用时，您必须有一种方法知道PHP是否返回了一些东西（对调试很有用）

然后，在使用AJAX提交表单时，不需要标记

action=”“

最后，为了防止在进行AJAX调用时发送表单，请在此处添加名为

的事件

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

和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'));
}

if（（isset（$\u POST['call-name']）和&（isset（$\u POST['phone']）和&$\u POST['phone']！=）{
$to$test@gmail.com';
$subject='Callback'；
$message='1
给我回电话
名称：'.$\u POST['call-Name'].'
Phonenum:'.$\u POST['phone'].
'; 
$headers=“内容类型：text/html；charset=utf-8\r\n”；
$headers.=“发件人：站点\r\n”；
邮件（$to、$subject、$message、$headers）；
echo json_编码（数组（'status'=>'success'）；
}否则{
echo json_编码（数组（'status'=>'error'）；
}

使用echo json_encode，您知道AJAX调用的返回是什么。如果你用Ajax完全没有用的话，

action=“/mail/call form.php”

是没有用的，这会更好吗？php文件是不必要的？？您忘记了一些事情，比如返回ajax。我正在写一个答案，请解释为什么你描述提交两次？当然。在第一个示例中，我复制了完全相同的代码并添加了returnfalse语句；这应该行得通。在我的第二个示例中，我使用了另一种绑定submit按钮的方法，正如我在评论中指出的那样，这样可以避免在后台调用Jquery。同样在第二个示例中，我使用了一种不同的方法来避免表单提交，即使用e.preventDefault（）；这避免了提交事件的默认行为“提交”。啊，我想这不是两个不同的例子）谢谢！

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

$(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);
    });
  }); 
});

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'));
}