php - jQuery、PHP 和 AJAX 问题

Question

我已经阅读了 jQuery AJAX 页面和大量教程，但在这里遇到了一个小问题。

没有错误或警告，只是一个空白页。

当用户用他们的电子邮件地址填写时事通讯订阅测试字段时，我正在尝试发送电子邮件，当您单击“提交”时，页面会刷新! (第一个问题)并且它无法在页面上显示任何内容(第二个问题)，您看到的只是一个空白页面。没有收到任何电子邮件。

我已经单独测试了电子邮件脚本，效果很好。我已经在不同的网站上使用了几个月，所以我知道它是有效的。

我尝试过在 jQuery 等中进行更改，但没有任何方法可以帮助解决此问题。

jQuery:

$(function () {
    var txt = $('.email').val();

    $.ajax({
        url: 'index.php',
        type: 'post',
        data: {
            email: txt
        },
        success: function (data) {
            alert(data);
        },
        error: function (err, req) {
            $('#Response').html({
                "Somethin' got broked. Please try again."
            });
        }
    });
});

PHP:

<?php


    if($_POST["email"] != null)
    {
        require_once "Mail.php";

        $email = $_POST["email"];

        // Send it.
        $from = "X@X.com.au";
        $to = $email;
        $subject = "Newsletter Subscription Request.";
        $body = "Thank you for subscribing to our newsletter!";
        $host = "mail.X.com.au";
        $username = "no-reply@X.com.au";
        $password = "X";
        $headers = array ('From' => $from,
                    'To' => $to,
                    'Subject' => $subject);
        $smtp = Mail::factory('smtp',
                    array ('host' => $host,
                    'auth' => true,
                    'username' => $username,
                    'password' => $password));
        $mail = $smtp->send($to, $headers, $body);
    }
?>

HTML:

  <h4 id="Response">Stay informed. Subscribe to our Newsletter!</h4>
      <form class="newsletterForm" action="index.php" method="post">
        <input type="text" class="email" name="email" />
        <input type='submit' class="btn" value="Subscribe" />
      </form>

有人可以帮我弄清楚为什么这不起作用吗？

谢谢

Answer 1

当此类问题不起作用时，我做的第一件事就是在 Chrome 开发者工具窗口中观察页面调用。

就您的代码而言，页面刷新的原因是因为表单提交正在进行。为了防止这种情况发生，您必须捕获表单提交:

$("form").submit(function() {
        // Do ajax
        return false; // Keeps the form from submitting
    });

一旦你做到了这一点，你应该会得到更好的结果。

不过，我要提醒大家的是，在不使用 ajax 的情况下，让 PHP 电子邮件发送表单正常工作要容易得多，只需让 PHP 电子邮件发送表单处理常规表单提交即可。一旦工作正常，然后将 ajax 绑在其上。