php - jQuery/ajax 表单不工作 php

Question

HTML 代码：

<form class="contact_form" action="" name="contact_form">
<ul><li>
<input type="email" name="email" placeholder="Enter your email here" required />
</li><li>
<button class="submit" type="submit" style="float:left" onclick="form()"onsubmit="hide_form('container_subscribe')">Send</button>
</li></ul>
</form>

jQuery/Ajax 代码：

$(function() {  
  $(".submit").click(function() {  
    // validate and process form here  
    var field1 = $('input[name=email]').val();
    $.ajax({
        type: "POST",
        url: "mail.php?f1="+field1,
    });
  });  
});

PHP代码：

<?php
$to      =  $_POST['field1'];
$subject =  'the subject';
$message =  'hello';
$headers =  'From: webmaster@example.com' . "\r\n" .
               'Reply-To: webmaster@example.com' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>

如果我使用 $_GET 而不是 $_POST 单独运行 php 脚本（发送邮件），则 php 脚本正在工作，所以我认为 ajax 无法与 php 文件通信。我不知道如何调试它。

Answer 1

一个问题是您f1在 AJAX 和field1PHP 中调用参数。这些需要匹配。

您还需要像这样编写您的 AJAX

$.ajax({
    type: "POST",
    data: "f1="+field1,
    url: "mail.php"
});

Answer 2

$(function() {  
$(".submit").click(function() {  
  // validate and process form here  
 var field1 = {'field1' : $('input[name=email]').val()};
 $.ajax({
     type: "POST",
     url: "mail.php",
     data: field1,
     success: function(out){ alert('Mail sended!'); },
     error: function(err){ alert(err.statusText); }
    });
  });  
});

Answer 3

在下面试试这个。

$.ajax({
     url: "mail.php",
     type: "POST", 
     data:$(".contact_form").serialize(),
     success:function(result)
         alert(result);
     },
     error:function(){
         alert("Error");
     },
});

这将允许您向表单添加任意数量的字段，并在 PHP 级别通过它们的名称检索它们。