Pull the echo from php into a div, without refresh

I have a div in html, it is with display none, I fill in the form and the data goes to a .php file and it gives me an echo saying that the data was entered in the database, only that I wanted it when the php gives that echo that div I have got the message and display.

HTML:

           <form id="form_pergunta" action="php/envia.php" Method="POST">
  <!--pergunta!-->
  <label for="input">Pergunta</label>
  <div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></span>
  <input type="text" name="pergunta" data-placement="bottom" class="form-control" placeholder="Ex: Quem é Jeová, com base no Biblia Ensina Pg. 10, Cap: 5?" aria-describedby="basic-addon1">
  </div><br>
  <div class="alert alert-danger" id="valida_pergunta" role="alert">
  <span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Pergunta
  </div>
  <!--pergunta!-->
  <!--resposta!-->
  <label for="input">Resposta:</label>
  <div class="input-group">
  <span class="input-group-addon" ><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span></span>
  <input type="text" name="resposta" class="form-control" placeholder="Ex: É Deus." aria-describedby="basic-addon1">
  </div><br>
  <div class="alert alert-danger" id="valida_resposta" role="alert">
  <span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Resposta
  </div>
  <!--resposta!-->
  <!--Desafio!-->
  <label for="input">Desafio:</label>
  <div class="input-group">
  <span class="input-group-addon" ><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></span>
  <input type="text" name="desafio" class="form-control" placeholder="Ex: Fique 10 segundos pulando num pé só." aria-describedby="basic-addon1">
  </div><br>
  <div class="alert alert-danger" id="valida_desafio" role="alert">
  <span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Desafio
  </div>
  <!--Desafio!-->



  <div class="form-group">
  <label for="select">Selecione a Dificuldade</label>
  <select class="form-control" name="dificuldade">
  <option value="1">Fácil</option>
  <option value="2">Médio</option>
  <option value="3">Difícil</option>
  </select>
  </div>
  <center><input type="button" class="btn btn-primary btn-lg" value="Enviar" id="enviar"></center><br><br>
  </form>

PHP:

  <?php
    $pergunta = $_POST ['pergunta'];
    $resposta = $_POST ['resposta'];
    $dificuldade = $_POST ['dificuldade'];
    $desafio = $_POST ['desafio'];
    $msg;

    switch ($dificuldade) {
       case '1':
        $dificuldade = "Facil";
        break;
       case '2':
        $dificuldade = "Medio";
        break;
       case '3':
        $dificuldade = "Dificil";
       break;
    }

    try{
          $conexao = new PDO ("mysql:host=localhost;dbname=teocratico;charset=utf8","root","");
     } catch (PDOException $erro){
       echo "Não foi possível conectar ao banco ". $erro->getMessage();

     }

    try {
    $insert =  $conexao-> prepare ("INSERT INTO perguntas (pergunta,  resposta, dificuldade, desafio) VALUES (

       :pergunta,
       :resposta,
       :dificuldade,
       :desafio
        )");
      $insert-> bindParam (':pergunta', $pergunta);
      $insert-> bindParam (':resposta', $resposta);
      $insert-> bindParam (':dificuldade', $dificuldade);
      $insert-> bindParam (':desafio', $desafio);
      $insert-> execute();

      $msg = "Pergunta enviada com Sucesso";
      echo $msg;
         } catch (Exception $erro) {
       echo "Não foi possivel enviar os dados" . $erro->getMessage();

     }
     ?>

JAVASCRIPT VALID FORM:

//Executar todo nosso JS quando o DOM estiver pronto. Por isso o Onload

window.onload = function(){

var button = document.getElementById("enviar"); // pega o valor do botao
var form = document.getElementById("form_pergunta"); //pega o form da pergunta todo
button.addEventListener("click", function(e){
if(validar(form)) form.submit();
});/Com acesso a isso, podemos executar uma função a cada vez que o botão for clicado, para isso
vamos usar o addEventListener() no botão e colocar a seguinte lógica:
CASO A FUNÇÃO VALIDAR RETORNE VERDADEIRA, DÊ UM SUBMIT NO FORMULÁRIO/

//Agora a função validar. Esta irá receber um parâmetro que é o próprio formulário que recuperamos acima.
function validar (form_pergunta){
var pergunta = form_pergunta.pergunta.value;
var resposta = form_pergunta.resposta.value;
var desafio = form_pergunta.desafio.value;
var passou = true;
if(pergunta ==""){
document.getElementById("valida_pergunta").style.display = "flex";
passou = false;
} else {
  document.getElementById("valida_pergunta").style.display = "none";
}
if (resposta == "") {
document.getElementById("valida_resposta").style.display ="flex";
passou = false;
} else {
  document.getElementById('valida_resposta').style.display = "none";
}
if (desafio ==""){
document.getElementById("valida_desafio").style.display = "flex";
passou = false;
} else {
  document.getElementById("valida_desafio").style.display = "none";
}
return passou;

}

}