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>'; ?>
No hay comentarios:
Publicar un comentario