Question

我已经构建了一个简单的HTML / PHP电子邮件注册表单，以显示在我网站的页脚区域中。只有两个字段：电子邮件和国家/地区。

该表单非常适合我的目的。数据收集，验证，清理，错误处理，清除字段，成功通知等 - 一切都好！

我的最后一步是实施AJAX以防止页面刷新。这就是AJAX所需的一切。

本网站上相关问题的所有教程，文章和答案我都找到了包含我已用PHP处理的函数的优惠代码。

我已经获得了AJAX提交，这是有效的。页面不刷新，用户输入插入数据库，我收到确认电子邮件。

我希望得到一些指导（或指向教程的链接），它可以帮助我实现PHP错误逻辑并回显PHP成功/错误消息。

HTML

<form action="process_footer_form/" method="post" id="footer-form">

<ul>

<li>
<input type="email" name="email" id="email"
value="<?php if (isset($email)) {echo $email;} ?>">
</li>

<li>
<input type="text" name="country" id="country"
value="<?php if (isset($country)) {echo $country;} ?>">
</li>

<li>
<input type="submit" name="submit" id="submit">
</li>

</ul>

<?php if (isset($success_message)) {echo $success_message;} ?>
<?php if (isset($error_message)) {echo $error_message;} ?>

</form>

JQuery的

$(function() {

    // identify form
    var form = $('#footer-form');

    // create event listener
    $(form).submit(function(event) {

        // disable html submit button
        event.preventDefault();

        // serialize form data
        var formData = $(form).serialize();

        // submit form using AJAX
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })

        .done(function(response) {

            // 1. echo PHP success message
            // 2. fire PHP clear fields command

        })

        .fail(function(data) {

            // 3. execute PHP error logic here
            // 4. echo PHP error messages

        });  
    });
});

PHP

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Load PHPMailer
require 'PHPMailer/PHPMailerAutoload.php';

// Create PHPMailer session
$mail = new PHPMailer;
$mail->CharSet = "UTF-8";

// SMTP settings
$mail->isSMTP();                                      
$mail->Host = 'smtp.xxxxxxxxxx.com';
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->Username = 'xxxxxxxxxxxxxxxxxx'; 
$mail->Password = 'xxxxxxxxxxxxxxxxxx';

$mail->setFrom('xxxxxxxxxxxxxxxxxx' , 'xxxxxxxxxxxxxxxxxx');
$mail->addAddress('xxxxxxxxxxxxxxxxxx');
$mail->isHTML(true);  

// Sanitize & Validate Input
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$country = trim(filter_input(INPUT_POST, 'country', FILTER_SANITIZE_SPECIAL_CHARS));

// set connection to mysql server
$connection = mysql_connect("localhost","xxxxxxxxxxxxxxxxxx","xxxxxxxxxxxxxxxxxx");

// connect to database
mysql_select_db("xxxxxxxxxxxxxxxxxx", $connection);

// insert user input to table
$sql = "INSERT INTO email_subscribers (email,country) VALUES ('$email','$country')";

if (!$connection) {

$error_message = <<<ERROR
<div>ERROR. Form not sent. Please try again or <a href="contact/">contact us</a>.</div>
ERROR;

// Send error notice to host
$mail->Subject = 'Website Error - Footer Form';
$mail->Body = ("Error Notice: A site user is having trouble on the footer form.");
$mail->send();

    } else {

    // run query
    mysql_query($sql, $connection);

$success_message = <<<CONFIRMATION
<div>Subscription complete. Thank you!</div>
CONFIRMATION;

    mysql_close($connection);

    // Send confirmation notice to host.
    $message = <<<HTML
    <span>E-mail: {$email}</span><br>
    <span>Country: {$country}</span>
HTML;

$mail->Subject = 'New E-mail Subscriber - Footer Form';
$mail->Body = $message;
$mail->send();

unset($email, $country);
}
} else {

header('Location: http://www.mywebsite.com/');
exit;

}
?>

Answer 1

您可以尝试使用FormData对象来简化生活。然后你的代码看起来像这样。我已经测试了这个。

<form method="POST" id="subscription-form" enctype="multipart/form-data">
<input type="email" name="email" id="email" value="gulliver@tinyletter.com">
<input type="text" name="country" id="country" value="Lilliput">
<input type="button" value="submit" id="form-submit">
</form>

在此之下，您可以输入div来显示消息：

<div id="messages"></div>

然后你的jquery / javascript看起来像这样：

<script>
(function(){
    $("#form-submit").on("click", function(){ submitForm();});
})();


function submitForm(){
var form = document.getElementById("subscription-form");
var fd = new FormData(form);
    $.ajax({
        url: './PHPscript.php',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            $("#messages").html(data);
       }
     });
   }
</script>

关于让PHP“处理消息”，我认为你错过了一些关于AJAX的东西。

在您的初始PHP页面中，您正在加载PHP生成的html，然后PHP部分已完成。当您进行AJAX调用时，您要求服务器执行不同的PHP脚本，然后将该脚本的输出返回给javascript。

此时，您需要将PHP生成的任何消息放回当前页面，该页面没有也不会重新加载。这就是首先使用AJAX的目的。这就是“消息”div的用途。

作为一种完全理解的方法，创建一个非常简单的PHPscript.php文件，看起来像这样并尝试一下：

<?php
print $_POST['email'] . ' ' . $_POST['country'];
?>

您将在该消息div中的当前页面中看到您的值。

Answer 2

第一个请求，例如www.mysite.com/something.php将运行PHP并将结果转储到页面中。 Ajax不会这样工作。您将request发送到您的PHP文件，它会发送一个response，然后您可以检查并执行某些操作。

如果ajax响应将其内容像初始加载一样转储到页面中，那么就会产生混乱。

尝试这样的事情：

        $.ajax({
            url: url,
            type: type,
            data: data
        }).done(function (response) {
            console.log(response);
        });

然后在控制台中有一个外观，看看你从PHP脚本中得到了什么好处。然后构建.done回调，以处理您的请求结果并确定要执行的操作。

Answer 3

好的，首先，当你失去上下文时，var that = this是一个技巧，但你使用它的地方不是你可以失去它的地方..所以忘了它：）

然后是你的find().each()，这是获取你的价值观的好方法，但是jquery提供的方法是$( this ).serializeArray()（它确实有点像你想要的那样）

另外，您使用ajax发送数据，但没有回调。一旦一切正常，你的ajax调用至少需要有一个函数来调用。这是通过done()

完成的

最后，返回false会取消大多数情况下的事件，但您会更喜欢preventDefault()，因为它会禁用默认行为，但仍会传播事件（对于其他处理程序）。

总结一下：

$('form.ajax').submit( function(event) {
    var form = $(this);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serializeArray()
    }).done(function(data) {
        alert("Ajax call successful");
        console.log("Server answer:" + data);
    });
    event.preventDefault();
});

编辑：Nvm我的第一句话，我最近了解了你的that = this内容。

AJAX表单提交，仅用于防止页面刷新而不是其他任何内容

3 个答案: