Q:

Puxar o echo do php para dentro de uma div, sem refresh

Eu tenho uma div no html, ela está com display none, eu preencho o form e os dados vão para um arquivo .php e o mesmo me da um echo dizendo que os dados foram inseridos no banco, só que eu queria que quando o php desse esse echo essa div que eu tenho pegasse a mensagem e exibisse. 
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 QUE VALIDA O 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;
}
}

A:

Envia os dados do form sem refresh e com "validação"; Captura a resposta do php em resp e preenche a div; Mostra o botão de refresh para renovar o form
<script>
$(function () {
    $('#refresh').click(function () {
        window.location = window.location;
    });
    // Comportamento do botao de envio do FORM
    $('#enviar').click(function () {
        if(validar() === true){
            // Se a validacao passar, carrega os dados do FORM e envia
            $.post(
                $("#form_pergunta").attr("action"),// Captura o ACTION do FORM
                $("#form_pergunta").serialize() // Captura os campos do FORM 
            )
            // Se enviar com sucesso, retorna a resposta do PHP
            .done(function (resp) {
                $("#success").attr('class','alert alert-success');
                $("#success").html(resp); //Preenche a DIV com a resp
                $('#success').show(); //Mostra a DIV
                $("#form_pergunta input").prop("disabled", true);
                $("#form_pergunta select").prop("disabled", true);
                $('#enviar').hide(); //oculta o botao de envio
                $('#refresh').show(); //Mostra o botao de refresh
            })
            // Se o envio falhar, retorna uma msg de erro
            .fail(function (resp) {
                $("#success").attr('class','alert alert-danger'); //Muda o CSS da DIV
                $("#success").html('Falha no envio!');  //Preenche a DIV com a msg
                $('#success').show(); //Mostra a DIV
            });
        } else {

        }
    });
});
// Validacao do FORM ao enviar
function validar() {
    var passou = true;
    if ($('#pergunta').val() === "") {
        $('#valida_pergunta').show();
        passou = false;
    } else {
        $('#valida_pergunta').hide();
    }
    if ($('#resposta').val() === "") {
        $('#valida_resposta').show();
        passou = false;
    } else {
        $('#valida_resposta').hide();
    }
    if ($('#desafio').val() === "") {
        $('#valida_desafio').show();
        passou = false;
    } else {
        $('#valida_desafio').hide();
    }
    return passou;
}
</script>

