在同一頁面上提交后如何獲得成功消息-不在新頁面中

Question

我的提交成功消息顯示在新頁面中。

如何將其顯示在與“提交”按鈕相同的頁面中？

contact.php

<?php 
// configure
$from = 'email'; 
$sendTo = 'email';
$subject = 'new message';
$fields = array('uname' => 'Jmeno', 'surname' => 'Spolecnost', 'phone' => 'Telefon', 'uemail' => 'Email', 'message' => 'Obsah zpravy'); // array variable name => Text to appear in email
$okMessage = 'success';
$errorMessage = 'error';

// let's do the sending  
try
{
    $emailText = "Mate novou zpravu z web formulare: example.cz\n=============================\n";
    foreach ($_POST as $key => $value) {
        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    } 
    mail($sendTo, $subject, $emailText, "From: " . $from);

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('location: contact.php?success=1');

    echo $encoded;
}
else {
    echo $responseArray['message'];
}
?>

JS提交按鈕：

 $(".open4").click(function() {
        $('#basicform').validator();
            $('#basicform').on('submit', function (e) {
                if (!e.isDefaultPrevented()) {
                    var url = "contact.php";
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $(this).serialize(),
                        success: function (data)
                        {
                            var messageAlert = 'alert-' + data.type;
                            var messageText = data.message;

                            var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                            if (messageAlert && messageText) {
                                $('#basicform').find('.messages').html(alertBox);
                                $('#basicform')[0].reset();
                            }
                        }
                    });
                    return false;
                }
            })

Answer 1

有2個地方可能會出現問題：

1.PHP代碼將您重定向到新頁面（好吧，頁面是相同的，但是將使用?success=1參數重新加載）：

header('location: contact.php?success=1');

如果您不希望重新加載頁面，請嘗試以下操作：

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    echo json_encode($responseArray);
} else {
    echo $responseArray['message'];
}

2.HTML表單提交事件會將您重定向到新頁面。 您可以嘗試禁用表單的默認行為以submit事件：

$(".open4").click(function() {
    $('#basicform').validator();
    $('#basicform').on('submit', function (e) {

        //prevent Default functionality
        e.preventDefault();

        var url = "contact.php";
        $.ajax({
            type: "POST",
            url: url,
            data: $(this).serialize(),
            success: function (data)
            {
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;

                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                if (messageAlert && messageText) {
                    $('#basicform').find('.messages').html(alertBox);
                    $('#basicform')[0].reset();
                }
            }
        });
        return false;
    });
});