Scribd Logo
Unggah

Selamat datang di Scribd!

  • Jquery AJAX y JSON Array

    Diunggah oleh

    Dane Cobb
    224 tayangan3 halaman

    Judul Asli

    jQuery AJAX y JSON Array.docx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    224 tayangan3 halaman

    Jquery AJAX y JSON Array

    Diunggah oleh

    Dane Cobb

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    jQuery AJAX y JSON Array

    En este post veremos el cdigo de ejemplo de una peticin AJAX (usando jQuery) que nos
    devolver una coleccin de objetos complejos.
    Hace varios meses escrib un articulo (AJAX jQuery en ASP.Net) donde comentaba las bases del
    uso de AJAX con jQuery, pero en aquel artculo usamos un ejemplo bien sencillo para una mejor
    comprensin.
    En este post intento ser un poco mas prctico y explicaremos un ejemplo de peticin AJAX ms
    parecido a lo que nos encontramos en la vida real, aunque eso s, un poco ms complejo (pero
    solo un poco, muy poco)

    Ejemplo jQuery AJAX con Array JSON


    En nuestro ejemplo de hoy, la pgina har una peticin AJAX a un PageMethod que devolver
    como resultado una coleccin de la clase Contacto. No devolver ni un string, ni int, ni DateTime
    sino una lista de objetos que veremos como tratarlos en el lado del cliente (AJAX JSON Array).
    Nuestra pgina (.aspx) inicialmente solo tendr un botn (Obtener Contactos). Al hacer clic en
    este se lanzar la peticin jQuery AJAX que retornar una lista de objetos del tipo Contacto. La
    lista de contactos la transformaremos en un Array JSON que podremos manipular perfectamente
    en el lado del cliente.
    Pero pasemos a ver el cdigo de este
    ejemplo AJAX.
    Ejemplo jQuery AJAX, ASPX

    <%@ Page Language="C#"


    AutoEventWireup="true"
    CodeFile="JQAjaxArrayJSon.aspx.cs"
    Inherits="jQuery_Ajax_JQAjaxArrayJSon"
    %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>
    <script type = "text/javascript">
    jQuery(document).ready(function() {
    $('#btnObtContactos').click(getContactos);
    });
    function getContactos() {
    $.ajax({
    type: "POST",
    url: "JQAjaxArrayJSon.aspx/ObtenerContactos",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
    var contactos = (typeof response.d) == 'string' ?
    eval('(' + response.d + ')') :
    response.d;

    $('#tablaContactos').empty();
    $('#tablaContactos').append('<tr>
    <td><b>ID</b></td><td><b>Nombre</b></td>
    <td><b>Telefono</b></td><td><b>EMail</b></td>
    </tr>');
    for (var i = 0; i < contactos.length; i++) {
    $('#tablaContactos').append('<tr>' +
    '<td>' + contactos[i].IdContacto + '</td>' +
    '<td>' + contactos[i].Nombre + '</td>' +
    '<td>' + contactos[i].Telefono + '</td>' +
    '<td>' + contactos[i].Email + '</td>' +
    '</tr>');
    }
    },
    error: function (result) {
    alert('ERROR ' + result.status + ' ' + result.statusText);
    }
    });
    }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <input type="button" id="btnObtContactos" value="Obtener Contactos" /> <br/><br/>
    <table id='tablaContactos'></table>
    </form>
    </body>
    </html>

    Ejemplo jQuery AJAX, Cdigo C#


    public partial class jQuery_Ajax_JQAjaxArrayJSon : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e) {}
    [WebMethod]
    public static List<Contacto> ObtenerContactos()
    {
    return new List<Contacto>
    {
    new Contacto { IdContacto=14, Nombre="Pedro", Telefono="601 01 01 01",
    Email = "pedrog@gmail.com" },
    new Contacto { IdContacto=15, Nombre="Maria", Telefono="601 01 01 02",
    Email = "maria69@gmail.com" },
    new Contacto { IdContacto=16, Nombre="Juana", Telefono="601 01 01 03",
    Email = "juana33@gmail.com" }
    };
    }
    }
    public
    {
    public
    public
    public
    public
    }

    class Contacto
    int IdContacto { get; set; }
    string Nombre { get; set; }
    string Telefono { get; set; }
    string Email { get; set; }

    Pero comentemos un poco el ejemplo AJAX ASP.NET que hemos expuesto:


    Lo primero que hicimos en el ASPX fue asociar al evento click del botn btnObtContactos, la
    funcin getContactos().
    $('#btnObtContactos').click(getContactos);
    Esta funcin es la que hace la llamada jQuery AJAX, pero detallemos ms en las opciones usadas
    en esta llamada AJAX:
    $.ajax() Opciones

    type: "POST": Con esto estamos especificando el tipo de peticin AJAX (HTTP Verb) que
    haremos al servidor (GET o POST). En nuestro caso hemos usado el mtodo POST.

    url: "JQAjaxArrayJSon.aspx/ObtenerContactos": Esta propiedad contiene la

    direccin url del mtodo donde est alojado nuestro servicio web (url / mtodo a invocar).
    En nuestro caso es un PageMethod (ObtenerContactos) que hemos definido en la propia
    pagina (JQAjaxArrayJSon.aspx) por simplicidad.

    data: "{}": Esta propiedad contiene los datos que sern enviados al servidor. En nuestro

    caso como el PageMethod (ObtenerContactos) no necesita ningn parmetro, pues no


    enviamos dato alguno. Si por ejemplo, quisiramos enviar algn dato en la peticin AJAX,
    podramos hacer algo como esto:
    data: "{'nombre': 'Derbis', 'apellidos': 'Corrales Varela'}"

    contentType: "application/json; charset=utf-8": Esta propiedad contiene el

    formato en el que estamos pasando nuestro parmetros al servidor.

    dataType: "json": Esta propiedad contiene el tipo de dato que esperamos recibir desde el
    servicio invocado. En nuestro caso JSON evala la respuesta y nos retorna un objeto
    javascript.

    Por ltimo seteamos success y error, asocindole las funciones que deben ejecutarse al
    terminarse de procesar la peticin AJAX, si todo fue bien se ejecutar la funcin success,
    de lo contrario ejecutar la asociada a error. En la funcin annima asociada a success lo
    que hacemos es obtener el Array JSON y llenar la tabla tablaContactos, pero no
    comentar ms de esto pues no es el objetivo de este artculo.

    Luego de esto solo queda comentar el cdigo C#, donde est el PageMethod ObtenerContactos,
    que no hace nada complicado, solo crea una lista de contactos (List<Contacto>) que devuelve.
    Nota: En este ejemplo utilizamos un PageMethod para hacer la llamada jQuery AJAX, pero
    tambin podramos haber usado un Web Services, WCF, o una simple pgina.

    Anda mungkin juga menyukai