0

Eu utilizo este código para trabalhar com ajax. Funciona perfeitamente. Porém é um código fixo, mas eu gostaria de colocar TODOS os códigos que eu faço via ajax e colocar num arquivo só e depois chamar via funções.

Exemplo:

arquivodefuncoes.js

cadastroUsuario(){
//aqui dentro meu ajax
}

cadastroDependentes(){
//aqui dentro meu ajax
}

Eu não sei trabalhar com funções e chamando essas funções. Com isto, eu trabalho via submit do formulário. Porém, eu tenho que ficar colocando o código abaixo de todo formulario que eu tenho, sendo assim, fica bagunçado meus arquivos.

Como eu poderia trabalhar criando funções e chamando no button ao invés de colocar o código abaixo do </form>?

<form method=post id="simples-formulario-ajax">
<button class="btn btn-primary" type="submit" name="enviar" value="enviar" id="enviar" disabled>
        Selecione a Cor para Prosseguir :)
    </button> 
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#simples-formulario-ajax').submit(function(e){
    e.preventDefault();

    if($('#enviar').val() == 'Enviando...'){
        return(false);
    }

    $.ajax({
        url: 'carrinho.php',
        type: 'post',
        dataType: 'html',
        data: {
            'acao': $('#acao').val(),
            'cod': $('#cod').val(),
            'cor': $('input:radio[name=cor]:checked').val()
        }
    }).done(function(data){
        window.location.href = "cart&";                                                                         
        //alert(data);
    });

});
</script>
10
  • A pergunta não está clara o suficiente. Você quer pegar o conteúdo de preventDefault() até alert() e reutilizar em outros lugares? É isso?
    – epx
    30/08/2019 às 2:41
  • Na verdade não. Eu estou chamando via submit, mas ao invés de submit eu gostaria de fazer via função. Para assim eu ter um arquivo com funções distintas e não vários código igual o de cima espalhados em vários lugares do meu projeto
    – Dionatan
    30/08/2019 às 2:43
  • É, eu não entendi a pergunta mesmo então.
    – epx
    30/08/2019 às 2:44
  • vou editar minha pergunta
    – Dionatan
    30/08/2019 às 2:45
  • @epx editei minha pergunta
    – Dionatan
    30/08/2019 às 2:50

1 Resposta 1

0

Você pode fazer da seguinte forma:

Coloque uma class nos forms que você quer enviar via AJAX. Por exemplo, .form-ajax, e também o action para onde ele será enviado (não precisa de id nem de method):

<form class="form-ajax" action="carrinho.php">
        ↑                 ↑

No evento .submit você irá usar como seletor a classe .form-ajax, ou seja, todo formulário que tiver essa classe será enviado via AJAX:

$('.form-ajax').submit(function(e){

Agora você precisa atribuir o formulário que disparou o evento submit numa variável, pois ela poderá ser usada dentro do $.ajax:

var $this = $(this);

Nas opção url do AJAX você irá pegar o atributo action do form:

url: $this.attr("action"),

E na opção data, você irá usar o método .serializeArray(), que retorna todos os campos do formulário em forma de objeto:

data: $this.serializeArray()

O código ficará assim:

$('.form-ajax').submit(function(e){
   e.preventDefault();

   var $this = $(this);

   if($('#enviar').val() == 'Enviando...'){
      return false;
   }

   $.ajax({
      url: $this.attr("action"),
      type: 'post',
      dataType: 'html',
      data: $this.serializeArray()
   }).done(function(data){
      window.location.href = "cart&";                                                                         
   });

});

No caso do redirecionamento window.location.href = "cart&";, que poderá variar dependendo do formulário, você pode fazer da seguinte forma, colocando um data-redir no form:

data-redir="cart&"

E no .done você irá buscar o valor desse atributo data-redir. Se ele não existir, não faz nada:

if($this.data("redir")){
   window.location.href = "cart&";                                                                         
}

Então o form ficaria assim agora:

<form class="form-ajax" action="carrinho.php" data-redir="cart&">

E o código:

$('.form-ajax').submit(function(e){
   e.preventDefault();

   var $this = $(this);

   if($('#enviar').val() == 'Enviando...'){
      return false;
   }

   $.ajax({
      url: $this.attr("action"),
      type: 'post',
      dataType: 'html',
      data: $this.serializeArray()
   }).done(function(data){
      if($this.data("redir")){
         window.location.href = $this.data("redir");                                                                         
      }
   });

});

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 .