I will show you one of the possibilities that I had told you, just as a demonstration, trying to explain that there are a thousand ways to differentiate our data and collect them sectored.
In this case we have two forms that have a similar pattern of behavior. They collect a data in select and make a call to two different APIs. (I wanted to make a more complex example, but I could not for lack of time, but we can resume it later).
You will see that, according to the form and the button pressed, the code knows how to differentiate the data and the call it has to make.
A single function is used for calls to Ajax. There, attributes such as url and method are taken from the same form.
Then, the Ajax response passes the data to another function that would serve to manage vistas . This function decides, based on the element with which you are working, to obtain and present the data of the response.
I wanted to comment on some parts of the code, but I have not done it for lack of time either. If you have doubts in something, you tell me in comment.
I hope it serves you.
$(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--</option>
<option value="JeT9CwAAQBAJ">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--</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>