1

Ola

E muito comum ver pela internet blocos de chamadas ajax que sempre repetem exaustivamente a mesma estrutura, eu gostaria de melhorar minhas chamadas usando padroes de parametrizacao e poupar codigo de meus processos.

Padrao atual:

$.ajax({
        type: "GET",
        url: url,
        dataType: "html",
        timeout: 30000,
        data: 
        {
            //parametros
        },
        success: function(data)
        {
            //caso sucesso...
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            //caso erro
        },
    });     

Eu gostaria de propor uma função que fosse centralizadora, algo como chamarAjax("POST", url, array(parametros))

Mas ai é que surgem as dúvidas: 1) Considerando que parametros pode ser uma array (chave/valor) como passar eles considerando que podem ser 'n' ?

2) Como trabalhar com o retorno da função executada (success, error, complete) no processo/script que chamou a função ?

Eu busquei exemplos desse paradigma mas não encontrei nada, agradeço qualquer indicação

10
  • Você pode ao invés de usar o ajax utiliar o AXIOS. Ele reduz um pouco o código que é utilizado. github.com/axios/axios 13/07/2018 às 18:11
  • 1
    Obrigado @LucasBrogni pela indicação, vou avaliar
    – MCunha98
    13/07/2018 às 18:19
  • 1
    pq não utilizar o $.post e o $.get? 13/07/2018 às 18:20
  • @TobiasMesquita nada contra, o ponto não se trata deles em sí, mas sim, de concentrar chamadas. Por exemplo ao inves de ter um $.get('usuario/blablabla') e toda sua configuração (com timeout por exemplo) eu queria ter algo mais simples em mãos
    – MCunha98
    13/07/2018 às 18:22
  • 1
    ia postar algo parecido com o @dvd postou, mas o exemplo dele está muito bom, aproveitando o done para chamar a função e retornando data, muito bom 13/07/2018 às 21:02

2 Respostas 2

2

Jovem, a chamada de $.ajax retorna uma Promise (bem provável que não seja a nativa, mas sim a do jQuery). Dessa forma, é possível que você chame uma função que retorne essa Promise, permitindo parâmetros, como a função $.ajax já faz, porém deixando parâmetros pré-definidos. Assim, você pode combinar a chamada de $.ajax e $.extend para aumentar o poder de reutilização.

Vou dar um exemplo pra você de como faço quando preciso fazer upload de arquivos com jQuery. Eu costumo utilizar as pré-definições dentro de uma função, mas não deixando o código engessado:

function ajaxUpload(options)
{

    options = $.extend({}, {
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
    }, options);


    return $.ajax(options);
}

Dessa forma, a chamada poderia ser feito dessa forma:

ajaxUpload({
    url: '/upload/imagem',
    data: data,
}).success(function () {
    console.log('upload da imagem concluído')
})


ajaxUpload({
    url: '/upload/texto',
    data: data,
    success: function () {
       console.log('upload do texto concluído')
    }
})

Observe que faço duas chamadas, reaproveitando as mesmas "configurações" do Ajax. Importante notar que na segunda chamada eu uso o success como parte do options, mostrando que é possível ter alta usabilidade tanto no retorno quanto pelo parâmetro.

Observação: Dependendo do seu uso, você nem mesmo precisa criar uma função, já que o jQuery tem vários métodos para facilitar requisição Ajax, pois já têm as opções de requisição pré-definidas.

Por exemplo:

  • $.post - Define uma requisição com o método POST
  • $.get - Define uma requisição GET
  • $.getJSON - Define uma requisição que retorna JSON já "parseado".

Exemplificando o uso do $.post:

  $.post('/url', {id: 1}, function (response) {
        console.log(response);
  })
1
0

Olá @MCunha98,

Você pode criar uma estrutura com PHP/Jquery. Onde o ajax ficará como um arquivo centralizador, e toda vez que você for executar um comando, define esse arquivo, enviando valores para ele, recebendo via GET/POST e atribuindo as variaveis via js.

por exemplo:

  • menu clientes e menu produtos.
  • Clica em menu clientes>novo cadastro
  • ao clicar em novo cadastro, faz um .load() do form, onde nesse form estará o ajax. Esse form será chamado por todos os recursos(clientes/produtos, etc...)
  • o form receberá um parametro, definindo de qual tela e demais itens definidos como convenção de sua estrutura.
2
  • isso eu ja fiz, a questao e justamente que a medida que a coisa vai crescendo começa a ter várias vezes o mesmo 'blocão' em momentos distintos do codigo e era isso que quero simplificar com uma função que ja faça a interface direta com o ajax
    – MCunha98
    13/07/2018 às 19:19
  • Experimenta criar uma function nomeFunc(){ colocando o ajax aqui e demais variaveis no success e before }. Então esse arquivo seria referenciado via script src ou inlcude, fazendo a chamada dele com seus parametros
    – Neo
    13/07/2018 às 19:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .