Ejemplo de ajax que regresa un objeto json

| 6 abril, 2015 | JQuery/Javascript, php | 5 comentarios

jquery logo

Jquery nos proporciona una manera bastante sencilla, corta y entendible de utilizar ajax, claro que también tiene que ver con la complejidad de lo que querrás realizar.

Les dejo un ejemplo sencillo de como hacer la llamada Ajax, retornar un JSON y rellenar la información en campos específicos de tu formulario, que a diferencia de regresar un html donde dibujas una porción completa de código, con json podemos solo mostrar información en donde nosotros necesitemos.

getDatos.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
/*En un arreglo agregar todos los datos a
transportar al formulario */
$obj=array();
$obj['nombres']="Homero";
$obj['apellidos']="Simpson";
$obj['opciones']="<option value='1'>uno</option>"
. "<option value='2'>dos</option>"
. "<option value='3'>tres</option>";
 
//Imprimir los datos como una cadena JSON
echo json_encode($obj);

 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 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 Ajax
$('#btnAjax').click(function () {
  //llamada ajax
  $.ajax({
    url: "getDatos.php", //url de donde obtener los datos
    dataType: 'json', //tipo de datos retornados
    type: 'post' //enviar variables como post
  }).done(function (data){
      /*ejecutar las siguientes instrucciones
      * al terminar de ejecutar la llamada
      * ajax*/
 
      //convertir el objeto JSON a texto
      var json_string = JSON.stringify(data);
 
      //convertir el texto a un nuevo objeto
      var obj = $.parseJSON(json_string);
 
      /*asignar los valores obtenidos del objeto
      * a cada unos de losc controlres deseados
      * en el formulario*/
      $('#nombres').html(obj.nombres);
      $('#apellidos').html(obj.apellidos);
      $('#opciones').html(obj.opciones);
    });
  });
});
</script>
</head>
<body>
<input id="btnAjax" type="button" value="Cargar Ajax"/><br/>
Nombres: <span id="nombres"></span><br/>
Apellidos: <span id="apellidos"></span>
<br/>
<select id="opciones">
<option value="0">cero</option>
</select>
</body>
</html>

 

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

5 comentarios
  1. Victor Fúnebre Responder

    hola, ¿cómo sería si fuese enviandoles valores a un archivo php e igual te regresara un formato de respuesta Json? en tu html tuvieras un input de texto y que buscará o que solo atrapara el php el valor y que este se lo asignes al json por ejemplo.?

  2. Javier Lenis Responder

    HOLA
    que buen tutorial

    pero no he podido solucionar este problema

    necesito pasar los datos del input a la funcion ajax para poder hacer la consulta php y devolver la respuesta con json

    esta es la parte

    $(document).ready (function(){

    /* OBTENEMOS TABLA */
    $.ajax({
    type: «POST»,
    url: «editinplace.php?tabla»

    })

    .done(function(json) {
    json = $.parseJSON(json)
    for(var i=0;i<json.length;i++)
    {
    $('.editinplace').append(
    "»+json[i].id+»»+json[i].cedula+
    «»+json[i].nombre+
    «»+json[i].apellido+

    como hago 🙁 🙁

    • hug0 Responder

      Para enviar parámetros al script php madiante ajax utiliza la proiedad data de jquery por ejemplo:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var input = $('#input').val();
      var contenido2 = 'cualquier cosa';
       
      $.ajax({
        data: {var1: input,
                  var2: contenido2} ,
        url: 'url_archivo_ajax.php',
        dataType: 'json',
        type: 'post'
      }).done(function(data){  
                  
      });

      La forma sencilla de conformar data es abrir corchetes ({}) y entre ellos escribir el nombre de la variable como el script php la va a recibir, dos puntos y el contenido.

      Luego en el script php los recuperas como los harias con una variable post de cualquier formulario:

      1
      2
      $var1 = $_POST['var1'];
      $var2 = $_POST['var2'];

Deja un comentario