REST y AJAX

La respuesta la obtenemos en JSON.

En el ejemplo vamos a hacer la petición de listado de productos y vamos a recibir id, name, description y price y lo vamos a meter en una tabla con botones de eliminar y editar en cada fila.

$(document).ready(function(){
 function getProductos(){
 $.ajax({
 url: "http://localhost/slim/api.php/productos",
 type: "get",
 success: function(response){

$.each(JSON.parse(response), function(i, index){
 if(index.id.length){
 $(".table").append("<tr><td>"+ index.id +"</td>" +
 "<td class='name'>"+ index.name +"</td>" +
 "<td class='description'>"+ index.description +"</td>" +
 "<td class='price'>"+ index.price +"</td>" +
 "<td><span class='delete btn btn-danger' data-producto='"+ index.id +"'>Borrar</span></td>" +
 "<td><span class='update btn btn-warning' data-producto='"+ index.id +"'>Editar</span></td>" +
 "</tr>");
 }
 });

//BORRAR
 $(".delete").unbind("click").click(function(){
 $.ajax({
 url: "http://localhost/slim/api.php/productos/"+$(this).data("producto"),
 type: "DELETE",
 success: function(response){
 $(".table").html("<tbody><tr><td>ID</td><td>NOMBRE</td><td>DESCRIPCIÓN</td><td>PRECIO</td><td>ELIMINAR</td><td>EDITAR</td></tr></tbody>");
 getProductos();
 $("#form").data("data-producto", "0");
 $("#form")[0].reset();
 }

});
 });

//UPDATE
 $(".update").unbind("click").click(function(){
 
 var id = $(this).data("producto");
 var name = $(this).parents('tr').find('td:eq(1)').html();
 var description = $(this).parents('tr').find('td:eq(2)').html();
 var price = $(this).parents('tr').find('td:eq(3)').html();

//relleno el form con los datos para actualizar
 $("#form #name-form").val(name);
 $("#form #description-form").val(description);
 $("#form #price-form").val(price);
 $("#form #idproducto-form").val(id);

$("#form").attr("data-producto", "1");

});

 }
 });

 }

})