Ejemplo jQuery+JSON

Ejemplo simple para la recepción y manejo de una cadena JSON vía jQuery

by hephitao

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<button id="get_btn" class="btn btn-default">Cargar Datos</button>
<br/>
<div class="panel panel-default">
    <div class="panel-heading">Respuesta</div>
    <div class="panel-body" id="salida">Presiona el botón para iniciar</div>
</div>

JavaScript

$(function () {
    $("#get_btn").click(function () {
        $.ajax({
            url: 'https://api.myjson.com/bins/sx4ts/',
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                var canciones = "<ul>";
                for (var c = 0; c < data.length; c++) {
                    var infocancion = "<li><img src='"+data[c].portada+"' width='100'/>" + data[c].titulo;
                    infocancion += " - " + data[c].autor;
                    infocancion += " <em>" + data[c].album + "</em> </li>";
                    canciones += infocancion;
                }
                canciones += "</ul>";
                $("#salida").html(canciones);
            }
        })
    });
});