Cómo enviar parámetros en ajax
Quiero dejar un ejemplo sencillo de cómo enviar parámetros o variables mediante una función ajax para que sea procesada en la forma que necesitemos y luego nos de un resultado.
En este ejemplo simplemente enviarémos dos numeros que devolverán la suma. Este ejemplo también lo hago como respuesta a Javier Lenis que necesitaba un ejemplo, y de paso disculpas por la tardanza en hacerlo pero el trabajo nos mantiene ocupados a todos.
Enviaremos las variables mediante POST y regresará un mensaje en JSON con la suma de los números que luego podemos presentar en un div.
procesarDatos.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php //recuperamos las variables enviadas por ajax $num1 = filter_input(INPUT_POST, 'num1'); $num2 = filter_input(INPUT_POST, 'num2'); //Las utilizamos como necesitemos $data = array( 'res' => ($num1 + $num2) ); //Imprimir los datos como una cadena JSON echo json_encode($data); |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- Formulario --> Num 1: <input name="num1" id="num1" /><br/> Num 2: <input name="num2" id="num2" /></span><br/> <input id="btnEnviar" type="button" value="Sumar"/><br/> <!-- Fin Formulario --> <br/><br> Resultado: <div id="resultado"></div> <!-- importar jquery --> <script src="../jquery-1.11.2.min.js" type="text/javascript"></script> <script> $(document).ready(function () { //Disparar funcion al hacer clic en el boton Enviar $('#btnEnviar').click(function () { //obtener los datos de las cajas de texto var varNum1 = $('#num1').val(); var varNum2 = $('#num2').val(); //llamada ajax /*Para conformar data es {nomVariable1: contenidoVariable1, nomVariable2: contenidoVariable2}*/ $.ajax({ data: {num1: varNum1, num2: varNum2}, url: "procesarDatos.php", //url de donde obtener los datos dataType: 'json', //tipo de datos retornados type: 'post' //enviar variables como post }).done(function (data){ console.log(data); //conformar respuesta final $('#resultado').html('El resultado es: <b>' + data['res'] + '</b>'); }); }); }); </script> </body> </html> |
Con este sencillo ejemplo obtendrémos algo así:
Entradas relacionadas
Sobre el Autor
hug0
Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla
Gracias, me ayudo mucho tu ejemplo.