lunes, 28 de mayo de 2012

Consulta ajax con la función post de jquery


Ajax con la función $.post() de jquery



post() permite enviar datos haciendo peticiones mediante http POST request, la función permite los siguientes parámetros ...
 
$.post("archivo.php", {parametro1: "lo que sea", parametro2: "lo que sea"}, callback());

En el siguiente ejemplo tenemos dos archivos uno llamado "index.php" y otro llamado "ajax.php" al cual enviaremos una consulta a través de dos parámetros que serán los dos campos de texto de un formulario y le enviaremos el valor introducido para cada uno de ellos y finalmente mostraremos el resultado de la consulta Ajax.


index.php

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function() {
var campo1_val = $("#campo1").val();
var campo2_val = $("#campo2").val();
$.post("ajax.php", {campo1: campo1_val, campo2: campo2_val}, function(data) {
   $("#caja").html("<p>Contenido Cargado ...</p>" + data);
 });
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" id="campo1" placeholder="introduce algo">
<input type="text" id="campo2" placeholder="introduce algo">
<input type="button" id="boton" value="POST()">
</form>
<div id="caja" class="caja"></div>
</body>
</html>


ajax.php

<?php 
$campo1 = $_POST["campo1"];
$campo2 = $_POST["campo2"];
echo '<p>Campo 1: ' . $campo1 . '</p>';
echo '<p>Campo 2: ' . $campo2 . '</p>';
?>