2

É o seguinte, gostaria de uma sugestão e dica para fazer correto um sistema. Por exemplo, hoje eu utilizo jquery e muito as requisições $.ajax, isto é para popular algum dados, para enviar dados de formulario e etc. Porém eu percebi que estou fazendo muitas requisições para o servidor e não sei se estou utilizando certo.

Para dar um exemplo eu tenho um formulário de cadastro de clientes por exemplo, quando a página de cadastro é aberta eu chamo várias requisições sendo elas:

  • Carregar os estados -- Carregar as cidades (quando altera o estado carrega a cidades)
  • Carregar as profissoes
  • Carregar o estado civil
  • Carrega Local da moradia

Entre outros dados que populo dinamicamente os

A minha dúvida é o seguinte, qual o melhor caminho para fazer essas requisições? ou o que fazer talvez para otimizar e não encher meu código de $.ajax...

Recentemente vi uma postagem do wBruno no blog pessoal dele falando que não é para usar jQuery exageradamente, e estou fazendo exatamente isto hahah..

Como vocês trabalham com isto? Quando precisa popular vários valores em um DropDown? Agradeço as dicas!

1

3 Respostas 3

1

Utilize métodos compactos

O Ajax é um método bem extenso, você pode utilizar um método mais compacto que existe na lista do jQuery Ajax Shorthand Methods.

Lista:

  • jQuery.get()
  • jQuery.getJSON()
  • jQuery.get()
  • jQuery.post()
  • .load()

Centralize os recursos

Se você precisa reduzir a quantidade de requisições separe as requisições como um CRUD, exemplo fictício em php:

jQuery

$.post( "script.php", {"acao": "select"}).done(function( data ) {
    console.log(data);
});

PHP

switch($_POST['acao']){
   case 'select':
      $output['ESTADOS'] = carregaEstados();
      $output['PROFISSOES'] = carregaProfissoes();
      $output['ESTADOCIVIL'] = carregaEstadoCivil();
      $output['LOCALMORADIA'] = carregaLocalMoradia();
      break;
}

echo json_encode($output);

Popular campos

Se você utiliza apenas o jQuery, não usa algum framework que usa data-binding, você pode criar as suas próprias funções de popular. de acordo com a sua necessidade criei uma para popular campos só para demonstrar o quão pode ser reusável.

$.fn.populateInput = function(data) {

  this.init = function() {
    if (!!data) {
      this.find('input').each(function(key, val) {
        var input = $(this);
        input.val(data[0][input.attr("name")]);
      });
    }
  };

  this.init();
  return this;
};

var data = {
  0: {
    nome: "Gabriel",
    sobrenome: "Rodrigues"
  }
};
var meuForm = $("#meuForm");
meuForm.populateInput(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="meuForm">
  <input type="text" name="nome">
  <input type="text" name="sobrenome">
</form>

2
0

Pq não busca todas as informações em uma variável JSon e depois trabalha com elas localmente com jQuery? Tipo: var Json = [{ estados : {'RJ', 'SP', 'ES', 'MG'}, profissoes : {'prof 1', 'prof 2', 'prof 3'}, estado_civil : {'solteiro', 'casado'}

}]

Depois faz um each em cada um dos nós da variável e preenche os elementos html.

4
  • Entendi, mas ai não ficaria muito pesado? por exemplo, pega a tabela cidades nela tem uns 15 mil registros pra mais, carregar tudo isso não iria ficar muito pesado? recentemente eu vi alguns arquivos no formato .json, já chegou a usar?
    – Crazy
    Commented 13/07/2016 às 18:31
  • Pode utilizar o autocomplete do jQuery, onde consegue definir a partir de quantos caracteres vai buscar, tipo, buscar cidades depois de 3 caracteres digitados no input, ai vai buscar só as cidades que começam com esses 3 caracteres. Commented 13/07/2016 às 18:56
  • Entendi, so que ai iria fazer novas requisições não é? Agradeço antecipadamente pelas respostas!
    – Crazy
    Commented 13/07/2016 às 19:05
  • Sim, mas é uma solução, eu faço assim, pois é melhor fazer 4 requisições de 100 registros a fazer uma de 15000. Commented 13/07/2016 às 19:24
0

Uma opção, se não forem tantos dados é trazer tudo de uma vez só, se forem muitos dados, dependendo da conexão do usuário, pode demorar ai sim compensa fazer várias requisições. Eu tive um caso de ter dois Dropdowns em que um dependia do outro, o que fiz foi trazer tudo de um vez e conforme a seleção do primeiro dropdown eu alterava os dados da segunda. Nesse caso eu achei melhor utilizar o v-for do Vue.js pra exibir com mais facilidade a lista de dados.

Esse negocio de não encher o código de jQuery é mais no que diz respeito a manipulação da DOM, no entanto se você usa o jQuery só para fazer ajax, há outras soluções menores e faceis.

2
  • Agradeço a dica, e sobre o item "outras soluções menores e faceis" o que seria? como disse no caso eu preciso fazer as requisições para popular meus dropdown e são varios, nao consigo pensar em outro meio.. agradeço novamente
    – Crazy
    Commented 13/07/2016 às 18:32
  • Do que eu conheço, duas soluções legais e bem fáceis são o aja.js ou o polyfill ES6 do window.fetch desenvolvido pelo Github, ou tentar fazer com javascript puro mesmo (já deixa de ser fácil), tipo isso stackoverflow.com/questions/8567114/… Commented 13/07/2016 às 19:29

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 .