Как получить сообщение об успешном завершении после отправки на той же странице - не на новой странице

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