Multiple ajax requests using jquery

0

I have this code over and over again and wanted to simplify this in a kind of plugin or function. Information I usually use, Type = > ' get ' and ' post ' and url , and return I deal in sequence with jquery .

$.ajax({
    type: '',
    url: '' ,
    dataType : 'json',
    //data: jsonString,
    beforeSend: function () {
        //SPINNER
    },
    success: function (data, textStatus, jqXHR) {

    },
    complete: function () {

    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
});
    
asked by anonymous 22.08.2017 / 23:29

4 answers

1

In my ajax requests I usually create a js class and there are generic methods, but by semantics I end up separating gets, posts .. Here is an example I use for Post

function BaseEnviaPost(url, objeto, onSuccess, onError) {
    $.ajax({
        url: url,
        type: "POST",
        data: objeto,
        datatype: "json",
        success: function (data) {
            onSuccess();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            onError(jqXHR, textStatus, errorThrown);
        }
    });
}

When I need to use it, the call gets simplified like this:

var success = function (data) {
   //ação
}

var error = function (jqXHR, textStatus, errorThrown) {
    //ação
}

function BaseEnviaPost() {
    var url = "";
    var data = {};
    BaseEnviaCreate(url, data, success, error)
}
    
22.08.2017 / 23:42
0

Dude, I think the game more explore a newer technologies that Dao has greater flexibility with Ajax calls. For example ... angularjs, it facilitates a lot. you would create a service and this service would use $http.get(<url>) and that's it. Anyway. This is the tip but does not answer the question.

Now, I would rather write a little function like this to solve your problem:

function (url, type, successFn, errorFn = undefined){
   // escreve os códigos aqui...
}

In reality, it does not help to do this, it's changing 6 to half a dozen. Take a look at angularjs, super easy!

  

link

    
22.08.2017 / 23:41
0

Function:

function funcaoAjax(type, url, dateType, beforesend, success, complete, error){
  $.ajax({
      type: type,
      url: url,
      dataType: dateType,
      beforeSend: beforesend,
      success: success,
      complete: complete,
      error: error
  });

}

To call:

funcaoAjax("POST", "minnhaurl", "POST", function(){
  // código do beforesend
}, 
function(data, textStatus, jqXHR){
  // código do success
},
function(){
  // código do complete
},
function(jqXHR, textStatus, errorThrown){
  // código do error
});
    
22.08.2017 / 23:43
0

Create a function around this ajax with some assumptions that can be changed, and uses the fact that ajax returns a promise object. Then you will repeat a lot less code.

function ajax(options) {
  return $.ajax({
    method: options.method || 'GET',
    url: options.url || './meu/endpoint/favorito,
    dataType: 'json',
    data: options.data || {},
    beforeSend: function() {
      //SPINNER
    },
  }).fail(function() {
    // aqui tratas dos erros que possam haver
    console.log('Erro...');
  });
}

And then to use:

ajax({url: './endpoint1').then(function(resposta){
    console.log(resposta);
});
    
23.08.2017 / 05:29