Carregar resultado de um form dentro de uma div (jQuery + Ajax)
Este código demonstra de forma simples como combinar jQuery com Ajax para carregar o resultado do processamento de um formulário dentro de uma div.
Descrição
Este código demonstra de forma simples como combinar jQuery com Ajax para carregar o resultado do processamento de um formulário dentro de uma div.
index.html:
<html>
<body>
<form>
Nome: <input type="text" name="nome"><br/>
E-mail: <input type="text" name="email"><br/>
<button type="button" id="butEnviar">Enviar</button>
</form>
<br/><br/>
<div id="saida"></div>
<!-- bibliotecas do jquery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- bibliotecas do jquery -->
<script>
$(document).ready(function() {
//definir evento "onclick" do elemento (botao) ID butEnviar
$("#butEnviar").click(function() {
//capturar o valor dos campos do fomulario
var nome = $("input[name=nome]").val();
var email = $("input[name=email]").val();
//usar o metodo ajax da biblioteca jquery para postar os dados em processar.php
$.ajax({
"url": "processar.php",
"dataType": "html",
"data": {
"nome" : nome,
"email":email
},
"success": function(response) {
//em caso de sucesso, a div ID=saida recebe o response do post
$("div#saida").html(response);
}
});
});
});
</script>
</body>
</html>
processar.php:
<?php
$nome = $_REQUEST['nome'];
$email = $_REQUEST['email'];
echo "Seu nome é <strong>$nome</strong>, teu email <strong>$email</strong> e...<br/><br/>VIVA O LINUX!!!";
?>
É possível colocar esse script em um .js?
Se sim como faço isso?
Já tentei usar "<script src="DivLoader.js" />" no lugar de onde o script é implementado, porém não obtive sucesso.
Desde já agradeço, abraços!