How to make a single request with ajax and jquery?

Question

How to make a single request with ajax and jquery?

I have more than 50 checkbox,when I click on it, it checked the status with jQuery step pro ajax bring the data from the page " home.php", but the way it is, I have to duplicate the code and change the id of the checkbox pro ajax go on the Select page Bring Me The Return and ta leaving my huge index. I would like a solution, I do not know much about ajax, but I want a single ajax code that will receive the checked values and make the request. Instead of duplicating the ajax and go changing the id.

Jquery and AJAX

<script src="jquery-3.4.1.js"></script> 
            <script type="text/javascript">
                 $("#cartao").click(function(){
                         if($('#cartao').is(':checked')){
                            $.ajax({
                                url: "php/home_.php",  // coloque aqui o endereço que vai buscar os dados no banco         
                                success: function (data) {                                  
                                    $('#conteudo').html(data); 
                                    $('#conteudo').show(); // Mostrar o retorno em texto no html

                                      $.each(data, function (i, element) {
                                        $('#conteudo').html(element.linha_usuario); // ou assim
                                     });
                                }

                            });
                           }
                     });

            </script>

            <script type="text/javascript">
                 $("#consorcio").click(function(){
                         if($('#consorcio').is(':checked')){
                            $.ajax({
                                url: "php/select_conso.php",  // coloque aqui o endereço que vai buscar os dados no banco         
                                success: function (data) {                                  
                                    $('#conteudo_').html(data); 
                                    $('#conteudo_').show(); // Mostrar o retorno em texto no html

                                      $.each(data, function (i, element) {
                                        $('#conteudo').html(element.linha_usuario); // ou assim
                                     });
                                }

                            });
                           }
                     });

            </script>

0

jquery ajax banco-de-dados requisição

Author: CodeGirlLB, 2020-02-10

Source

1 answers

score 1 · Answer 1

Apparently you already know that a id must be unique on the page, so much so that you are using a id for each checkbox. So far so good. However, using multiple IDs in the same collection of elements is not the best use of the attribute.

Since you didn't show the checkbox HTML, there are two better alternatives to do than using an id for each element.

If the checkboxes are all in the same div, this way:

<div class="opcoes">
   <input type="checkbox" data-url="home_"> Cartão
   <input type="checkbox" data-url="select_conso"> Consórcio
</div>

You can select them as follows shape:

$(".opcoes :checkbox")

See that no id was needed. I selected all the checkboxes that are inside the div .opcoes.

I put an attribute data-url with the name of the page to be requested (only the page name, without the full path and without the extension .php). The value of this attribute you will get in AJAX according to the checkbox checked:

$(".opcoes :checkbox").click(function(){
   if(this.checked){
      $.ajax({
         url: "php/" + this.dataset.url +".php",  // coloque aqui o endereço que vai buscar os dados no banco         
         success: function (data) {                                  
            $('#conteudo').html(data); 
            $('#conteudo').show(); // Mostrar o retorno em texto no html

            $.each(data, function (i, element) {
               $('#conteudo').html(element.linha_usuario); // ou assim
            });
         }
      });
   }
});

Now, if the checkboxes are "scattered", i.e. do not have a parent div in common, you could put a class in each of them, keeping the same logic as the previous example, just changing event selector click:

HTML example:

<input class="opcao" type="checkbox" data-url="home_"> Cartão
<input class="opcao" type="checkbox" data-url="select_conso"> Consórcio

JQuery:

$(":checkbox.opcao").click(function(){
   if(this.checked){
      $.ajax({
         url: "php/" + this.dataset.url +".php",  // coloque aqui o endereço que vai buscar os dados no banco         
         success: function (data) {                                  
            $('#conteudo').html(data); 
            $('#conteudo').show(); // Mostrar o retorno em texto no html

            $.each(data, function (i, element) {
               $('#conteudo').html(element.linha_usuario); // ou assim
            });
         }
      });
   }
});