Ajax Requests - Tips

Question

Ajax Requests - Tips

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

It is as follows, I would like a suggestion and tip to make a system correct. For example, today I use jquery and many $ .ajax requests, this is to popular some data, to send form data and etc. But I realized that I'm making too many requests for the server and I'm not sure if I'm using it right.

To give an example I have a customer registration form for example, when the registration page is open I call several requests being them:

Load states - Load cities (when you change the state loads cities)
Upload the jobs
Upload the marital status
Loads Location of the house

Among other data that dynamically populates the

My question is, what is the best way to do these requests? or what to do maybe to optimize and not fill my $ .ajax code ...

Recently I saw a post from wBruno on his personal blog saying that it is not to use jQuery too much, and I am doing exactly that haha ..

How do you work with this? When do I need to populate multiple values in a DropDown? Thanks for the tips!

javascript html jquery ajax

asked by anonymous 13.07.2016 / 19:44

3 answers

How to integrate KCFinder with Laravel? Running WebSocket direct in php class

score 1 · Answer 1

Use compact methods

Ajax is a very extensive method, you can use a more compact method that exists in the list of jQuery Ajax Shorthand Methods .

List:

jQuery.get ()

jQuery.getJSON ()

jQuery.get ()

jQuery.post ()

.load ()

Centralize resources

If you need to reduce the number of requests, separate the requests as a CRUD, a dummy example in 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 fields

If you only use jQuery, do not use any framework that uses data-binding, you can create your own popular functions. according to your need I created one for popular fields only to demonstrate how reusable it can be.

$.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><formid="meuForm">
  <input type="text" name="nome">
  <input type="text" name="sobrenome">
</form>

score 0 · Answer 2

Why do not you search all the information in a JSon variable and then work with them locally with jQuery? Type: var Json = [{ states: {'RJ', 'SP', 'ES', 'MG'}, professions: {'prof 1', 'prof 2', 'prof 3'}, civil_status: {'single', 'married'}

}]

Then make each one on each of the variable nodes and fill in the html elements.

score 0 · Answer 3

One option, if not so much data is to bring everything at once, if there is a lot of data, depending on the user's connection, it may take a while to make multiple requests. I had a case of having two Dropdowns in which one depended on the other, what I did was bring it all at once and according to the selection of the first dropdown I changed the data of the second. In that case, I thought it best to use v-for of Vue.js to display the data list more easily.

This business not to fill the jQuery code is more about DOM manipulation, however if you use jQuery just to do ajax, there are other smaller and easier solutions.