1

Tengo en cada pagina de 1 o mas botones y para mandar variables al servidor uso ajax para cada boton, es decir cada boton tiene su codigo de llamada ajax por que debo enviar diferentes variables

$.ajax({
  url: destination.url,
  data: "id="+blog.id+"&name="+blog.name+
        "&url="+blog.url+"&author="+blog.author,
  type: "post",
  success: function(json) {
    [...]
  },
  error:function (xhr, ajaxOptions, thrownError) {
    [...]
  }
});

Esta bien que cada boton tenga su propio codigo de ajax? no deberia generalizarlo?

2
  • 1
    No necesariamente tienen que ser varias llamadas. Si el código que se ejecuta es el mismo puedes capturar (por ejemplo mediante 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.
    – A. Cedano
    Commented el 24 ene. 2018 a las 0:54
  • @A.Cedano es justo lo que busco puedes responder porfavor.
    – hubman
    Commented el 24 ene. 2018 a las 1:20

2 respuestas 2

1

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>

1

Digamos que repetir ese código no es una buena práctica.

Lo que podrías hacer es una función con un selector, se me ocurre algo así:

$(".ajax").click(function(evt){
  var $this = $(this);
  var blog = {
    id: $this.data('blog-id'),
    url: $this.data('blog-url'),
  }
  
  $.ajax({
    url: destination.url,
    data: "id="+blog.id+"&name="+blog.name+
          "&url="+blog.url+"&author="+blog.author,
    type: "post",
    success: function(json) {
      [...]
    },
    error:function (xhr, ajaxOptions, thrownError) {
      [...]
    }
  });
});
<button class="ajax" data-blog-id=1 data-blog-url="url">boton 1</button>
<button class="ajax" data-blog-id=2 data-blog-url="url">boton 2</button>
<button class="ajax" data-blog-id=3 data-blog-url="url">boton 3</button>

1
  • pero son diferentes variables
    – hubman
    Commented el 24 ene. 2018 a las 1:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.