Ejemplo de ajax que regresa html

| 12 junio, 2015 | JQuery/Javascript, php | No hay comentarios

Ajax se ha vuelto un complemento casi obligatorio para el desarrollo de aplicaciones web donde el propósito es entregar información al usuario sin necesidad de salir de la página web donde se encuentre, las dos formas que yo he más utilizado (realmente no se si hay más) es que la respuesta de ajax me regrese un objeto json o el html como tal.

El ejemplo de esta vez es que regrese un respuesta html en un ejemplo de sumar dos cantidades. Lo primero es descargar JQuery y descomprimirlo dentro de nuestro proyecto.

Creamos el archivo que procesará la suma de los dos números:

getSuma.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
// verificamos que los datos viene por el metodo post
if(filter_input(INPUT_POST, 'num1') && filter_input(INPUT_POST, 'num2')){
  //recogemos las variables
  $num1=filter_input(INPUT_POST, 'num1');
  $num2=filter_input(INPUT_POST, 'num2');
 
  //sumamos
  $resultado=$num1 + $num2;
 
  //imprimimos resultado
  echo "<div style='font-size: 20px; font-weight: bold; padding: 5px; border: 1px solid red;'>EL RESULTADO ES: ".$resultado. "<div>";
}

Y creamos nuestro archivo index desde donde llamaremos a getSuma para ejecutar la labor de suma.

index.php
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
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax con JQuery</title>
    <!-- Agregamos la libreria Jquery -->
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
 
    <!--inicio: script para llamar por ajax -->
    <script>
      $(document).ready(function () {
 
        //Detectamos cuando hagan clic en el boton de sumar
        $('#btnSumar').click(function () {
 
          //recogemos el contenido de las cajas de texto
          var num1 = $('#num1').val();
          var num2 = $('#num2').val();
 
          //formamos un array con los datos que vamos
          //a enviar por medio de la funcion ajax
          var parametros = {
            'num1': num1,
            'num2': num2
          };
 
 
          $.ajax({//inicia la funcion ajax
            type: 'POST', //tipo de envio: post o get como en un formulario web
            data: parametros, //ajuntamos los parametros con los datos
            url: "getSuma.php", //url del archivo a llamar y que hace el procedimiento
            dataType: 'html' //tipo de data que retorna
          })
          //done se ejecuta al terminar la ejecucion del archivo getSuma.php
          .done(function (data) {
            //llenamos el div "resultado" con lo obtenido de getSuma.php
            $('#resultado').html(data);
          });
        });
      });
    </script>
    <!--fin: script para llamar por ajax -->
  </head>
  <body>
    <h3>SUMA DE DOS NUMEROS CON AJAX-JQUERY (DEVUELVE HTML)</h3>
    <input type="text" id="num1" /> + <input type="text" id="num2" />
    <input type="button" id="btnSumar" value="Sumar" /> <br/>
    <br/>
    <!-- Este div es el que se llena con el resultado de getSuma.php -->
    <div id="resultado"></div>
  </body>
</html>

De esta forma llamamos a un procedimiento sin salir del origen de la acción.

 

Etiquetas:

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

Deja un comentario