Te mostraré una de las posibilidades que te había comentado, sólo como demostración, tratando de explicar que hay mil maneras de diferenciar nuestros datos y recogerlos sectorizados.
En este caso tenemos dos formularios que tienen un patrón de comportamiento parecido. Recogen un dato en un select
y hacen una llamada a dos APIs distintas. (Quería hacerte un ejemplo más complejo, pero no pude por falta de tiempo, pero podemos retomarlo luego).
Verás que, según el formulario y el botón presionado, el código sabe diferenciar los datos y la llamada que tiene que hacer.
Se usa una única función para las llamadas a Ajax. Allí, los atributos como url
y method
son tomados del mismo formulario.
Luego, la respuesta Ajax pasa los datos a otra función que serviría para gestionar las vistas
. Esa función decide, en base al elemento con el que esté trabajando, obtener y presentar los datos de la respuesta.
Quería comentar algunas partes del código, pero tampoco lo he hecho por falta de tiempo. Si tienes dudas en algo me lo dices en comentario.
Espero te sirva.
$(function() {
$('#btnLibros, #btnGithub').on('click', function(e) {
e.preventDefault();
var frm = this.closest("form");
var salidaHTML = '';
var idSalida = this.value;
postAjax(frm, idSalida);
});
});
function postAjax(frm, idSalida) {
var id = $(frm).find(':selected').val();
var url = frm.action;
var metodo = frm.method;
//var data = {id: id };
var request = $.ajax({
url: url + id,
method: metodo,
//data: data,
dataType: 'json' /*Se podría pasar en parámetro*/
});
request.done(function(jsonDone) {
jsonDone["accion"] = idSalida;
viewLibros(jsonDone, idSalida);
//console.log(jsonDone);
});
request.fail(function(xhr, textStatus, err) {
var jsonError = {
error: textStatus + ' ' + xhr.status
};
viewLibros(jsonError, idSalida);
});
}
function viewLibros(json, idSalida) {
var siError = json.error ? true : false;
var salidaHTML = '';
if (siError) {
salidaHTML = json.error;
} else {
var accion = json.accion;
switch (accion) {
case 'libros':
var volInfo = json.volumeInfo;
var srcImagen = '<div class="post-thumb"><img src="' + volInfo.imageLinks.thumbnail + '"></div>';
salidaHTML += srcImagen;
salidaHTML += '</div>';
salidaHTML += '<div class="post-container"><h3 class="post-title">Datos del libro:</h3>';
salidaHTML += '<div class="post-content">';
salidaHTML += 'Título: ' + volInfo.title + '<br />';
salidaHTML += 'PlayStore: ' + '<a href="' + json.saleInfo.buyLink + '" target="_blank">Click aquí</a><br />';
salidaHTML += 'Fecha: ' + volInfo.publishedDate + '<br />';
salidaHTML += 'Descripcion: <br /><br />' + volInfo.description + '<br />';
salidaHTML += '</div>';
break;
case 'github':
salidaHTML += '<div><h3>Datos del usuario:</h3>';
salidaHTML += '<p>';
salidaHTML += 'Id: ' + json.id + '<br />';
salidaHTML += 'Nombre: ' + json.name + '<br />';
salidaHTML += 'Blog: ' + '<a href="' + json.blog + '" target="_blank">Click aquí</a><br />';
salidaHTML += 'Repos: ' + json.public_repos + '<br /></div>';
break;
default:
salidaHTML='Ninguno seleccionado';
}
}
$('#' + idSalida).html(salidaHTML);
}
.post-container {
margin: 20px 20px 0 0;
overflow: auto;
}
.post-thumb {
float: left;
}
.post-thumb img {
display: block;
}
.post-content {
margin-left: 20px;
}
.post-title {
font-weight: bold;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Form. Libros</h4>
<form id="frmLibros" action="https://www.googleapis.com/books/v1/volumes/" method="get">
<div>
<select id="selLibros">
<option value="0" selected>--Seleccione un libro y haga click en Buscar libro--</option>
<option value="LVlwDgAAQBAJ">Los Miserables</option>
<option value="XyqXcyJ7Z2IC">Hamlet</option>
<option value="5s4OAAAAYAAJ">Don Quijote de la Mancha</option>
<option value="Ne-RCgAAQBAJ">Leccionario Bienal</option>
</select>
</div>
<div>
<input type="text" id="ibxNombre" name="ibxNombre" placeholder="Escriba su nombre">
</div>
<div>
<input type="text" id="ibxApellido" name="ibxApellido" placeholder="Escriba su apellido">
</div>
<button id="btnLibros" value="libros">Buscar Libro</button>
</form>
<div id="libros">*</div>
<h4>Form. Github</h4>
<form id="frmGithub" action="https://api.github.com/users/" method="get">
<div>
<select id="selGithub">
<option value="0" selected>--Seleccione un usuario y haga click en Buscar usuario--</option>
<option value="fabpot">Fabien Potencier</option>
<option value="andrew">Andrew Nesbitt</option>
<option value="taylorotwell ">Taylor Otwell</option>
<option value="padrecedano">Cedano</option>
</select>
</div>
<div>
<input type="text" id="ibxNombre" name="ibxNombre" placeholder="Escriba su nombre">
</div>
<div>
<input type="text" id="ibxApellido" name="ibxApellido" placeholder="Escriba su apellido">
</div>
<button id="btnGithub" value="github">Buscar Usuario</button>
</form>
<div id="github">*</div>
this
) los elementos correspondientes al botón que fue presionado, si los tienes bien ordenados en tu HTML. Hay muchas formas de diferenciar y obtener sólo una parte de tu DOM. Sin embargo si el código que ejecuta cada botón es muy diverso, entonces sí es mejor que tengas varios eventos según los botones. Puedes también tener una función para la petición Ajax a la cual le pasas los datos que sean diferentes. Suponte que tengas 30 botones, no vas a tener 30 llamadas.