How to improve (refactor) this code from JQUERY AND AJAX?

Question

How to improve (refactor) this code from JQUERY AND AJAX?

Navigation

#1 by (2 votes)

1

I have a code that although it is functional, I see that it can be improved a lot and thus save us a few lines. How can I do it?

$(document).ready(function() {
    $('#bsubmit').click(function(e){



        e.preventDefault();
        var valorCategoria1 = $('input[name="categoria1"]').val();
        var valorCategoria2 = $('input[name="categoria2"]').val();
        var valorCategoria3 = $('input[name="categoria3"]').val();
        var valorCategoria4 = $('input[name="categoria4"]').val();
        var valorCategoria5 = $('input[name="categoria5"]').val();

        var rutaCompleta = 'http://localhost/ficheros/laravel_escuelait/public/admin/categorias';

        if(valorCategoria1 == '' || valorCategoria2 == '' || valorCategoria3 == '' || valorCategoria4 == '' || valorCategoria5 == '')
        {

                     $('.jumbotron').before(notificacion('danger','TIENES QUE INTRODUCIR UNA CATEGORIA'));  

                        return false;
        }
        else if(valorCategoria1.length < 3 || valorCategoria2.length < 3 || valorCategoria3.length < 3 || valorCategoria4.length < 3 || valorCategoria5.length < 3)
        {
                 $('.jumbotron').before(notificacion('danger','MINIMO POR CATEGORIA, 3 CARACTERES'));
                return false;
        }
        else
        {
                $.ajax({
                    url: rutaCompleta,
                    method: 'POST',
                  data: {'categoria1': valorCategoria1,
                            'categoria2': valorCategoria2,
                            'categoria3': valorCategoria3,
                            'categoria4': valorCategoria4,
                            'categoria5': valorCategoria5,
                            },
                    headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') },
                })
                .done(function() {
                    console.log("success");
                        $('.jumbotron').before(notificacion('success','REGISTRO ..:: '+valorCategoria1+' ::.. CREADO CORRECTAMENTE'));
                        $('.jumbotron').before(notificacion('success','REGISTRO ..:: '+valorCategoria2+' ::.. CREADO CORRECTAMENTE'));
                        $('.jumbotron').before(notificacion('success','REGISTRO ..:: '+valorCategoria3+' ::.. CREADO CORRECTAMENTE'));
                        $('.jumbotron').before(notificacion('success','REGISTRO ..:: '+valorCategoria4+' ::.. CREADO CORRECTAMENTE'));
                        $('.jumbotron').before(notificacion('success','REGISTRO ..:: '+valorCategoria5+' ::.. CREADO CORRECTAMENTE'));
                    })
                .fail(function(erroz) {
                    console.log("error_"+erroz.status);
                })
                .always(function() {
                    console.log("complete");
                });



            }


    })

jquery ajax

asked by KurodoAkabane 14.12.2016 в 12:05

source

1 answer

Get json of a rest api and show it in angular Android: image path to Bitmap

score 2 · Accepted Answer

Taking advantage of the selector's index, it occurs to me to do something like this:

 var data = {};

 for (var i = 1; i < 6; i++) {
     data['categoria' + i] = $('input[name="categoria' + i + '"]').val();

     if (data['categoria' + i].length < 3) {
         if (data['categoria' + i] == '') {
             $('.jumbotron').before(notificacion('danger', 'TIENES QUE INTRODUCIR UNA CATEGORIA'));
             false;
         } else {
             $('.jumbotron').before(notificacion('danger', 'MINIMO POR CATEGORIA, 3 CARACTERES'));
             return false;
         }
     }
 }

 $.ajax({
    url: rutaCompleta,
    method: 'POST',
    data: data,
    ...