Consumindo Webservices REST com jquery
Em tempos de web 2.0 é muito comum um site/serviço/como-queira oferecer uma API. Pelos motivos citados aqui, REST costuma ser uma excelente forma de implementar esse recurso.
Disponibilizar uma interface REST não é complicado (utilizo o django-piston), se a implementarmos antes da interface, podemos permitir que as chamadas CRUD AJAX todas sejam feitas utilizando a API REST. Assim o site fica com ZERO GAMBIARRAS sem aquelas views específicas para fazer o ajax funcionar. Muito interessante né ?
Vou escrever um pouco sobre como consumir webservices REST com jquery aqui:
Para adicionar novos itens e ler dados o jquery já tem as funções $.post e $.get_JSON (e xml) implementadas, então a coisa fica bem simples. Segue um exemplo de POST e GET:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // listando um objeto $.getJSON('http://yoursite.com/api/json/people/1', function(data) { alert("The name of the user with id 1 is" + data.name); }); // adicionando $("#add_button").click(function(event){ data = get_form_as_dict($('#add_form')); $.post('http://yoursite.com/api/json/people/', data,function(data){callback_function(data)}; |
Porém, na hora de editar (PUT) e deletar (DELETE) não temos um atalho. Poderíamos fazer o $.ajax manualmente toda vez. Mas criar o atalho é bem mais interessante:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function _ajax_request(url, data, callback, type, method) { if (jQuery.isFunction(data)) { callback = data; data = {}; } return jQuery.ajax({ type: method, url: url, data: data, success: callback, dataType: type }); } jQuery.extend({ put: function(url, data, callback, type) { return _ajax_request(url, data, callback, type, 'PUT'); }, delete_: function(url, data, callback, type) { return _ajax_request(url, data, callback, type, 'DELETE'); } }); |
Com isso, podemos editar e deletar objetos assim:
1 2 3 4 5 6 | // editando $.put('http://yoursite.com/api/json/people/1',changed_data, calback_function); // deletando $.delete_('http://yoursite.com/api/json/people/1', calback_function); |