2

O código no Ajax funciona perfeitamente mas os dados não são enviados para o php! Aonde estou errando?

AJAX.php

<!DOCTYPE html>
<html>
    <head>
        <title>AJAX</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script> 
        <script type="text/javascript" src="AJAX.js"></script>
        <style>
            .comments{
                margin-left:400px;
                width: 400px;
            }
        </style>         
    </head>
    <body>
        <div class="cadastro"> 
            <form id="form-msg"  method="post" enctype="multipart/form-data">
                <fieldset>
                    <p>
                        <span>Digite seu comentário:</span>
                        <input type="textbox" id="mensagem">
                        <button type="button"> Clique  </button>
                    </p>  

                </fieldset>
            </form>   
        </div>     
            <p>Comentários</p>
            <span id="aqui"></span>     
        </div>

    </body>
</html>

AJAX_ACTION.php

<?php


$mensagem = $_REQUEST['mensagem'];
echo $mensagem;

AJAX.js


$(document).ready(function () {   
    $("button").click(function(){              
        var mensagem = $('#mensagem').val()
        if (mensagem == ''){
            alert("Comentário não pode ser vazio")
        }
        else{
            $.ajax({        
                type: 'POST',
                url: "AJAX_ACTION.php",
                data: {
                    mensagem: mensagem,


                },   
                dataType: "json",
                success: 
                    $("#aqui").append("<br>").append(mensagem),
                done:
                    $("#mensagem").val(''), 

            });                   
        }   
    });     
});  

6
  • 1
    Como vc sabe que não está enviando?
    – Sam
    25/08/2019 às 22:32
  • Já tentei alterar o url do Ajax para "AJAX.php" e colocar o código do php lá, mesmo assim nada ocorre, o echo $mensagem nunca imprime nada. 25/08/2019 às 22:48
  • vou reorganizar tudo pra vc. E depois vc readapta para seu projeto ok?
    – user148170
    25/08/2019 às 23:11
  • OK! Na verdade é só mais um teste mesmo... 25/08/2019 às 23:13
  • @PedroHenrique verifique se deu certo,
    – user148170
    25/08/2019 às 23:44

2 Respostas 2

1

Você precisa utilizar o callback do success, e em vez de done, use complete. O callback do complete é executado após a passar pelo callback do success:

,success: function(response){
   // faz algo aqui se deu tudo certo
}
,complete: function(){
   // faz algo aqui se deu tudo certo ou não
}

Repare que a variável response (você pode usar o nome que quiser) é o que retorna do backend (no seu exemplo, o echo $mensagem; do PHP).

Retire a opção dataType: "json", senão o success não será executado caso o retorno não seja um JSON válido.

4
  • É realmente necessário usar o function() e receber o valor como argumento nesses casos? 26/08/2019 às 23:47
  • Se ele quiser receber uma resposta do servidor, é necessário sim.
    – Sam
    26/08/2019 às 23:53
  • Então sem o echo do meu php neste caso o argumento mensagem não terá valor no success? Pensava que o valor desta variável era relacionado ao javascript apenas. Agora resolvido então. 26/08/2019 às 23:58
  • A variável mensagem tem o valor que vem de var mensagem = $('#mensagem').val(). Até aí tudo ok. Porém, se vc deseja receber algum dado do PHP, é preciso usar a function() (callback).
    – Sam
    27/08/2019 às 0:04
1

Pedro, primeiro coloquei tudo em letras minúsculas para organização. Depois alterei sua função de onClick para submit colocando este type no seu button.

Segue index.php:

<!DOCTYPE html>
<html>
    <head>
        <title>AJAX</title>

        <style>
            .comments{
                margin-left:400px;
                width: 400px;
            }
        </style>         
    </head>
    <body>
        <div class="cadastro"> 
            <form id="form-msg" method="post" enctype="multipart/form-data">
                <fieldset>
                    <p>
                        <span>Digite seu comentário:</span>
                        <input type="textbox" id="mensagem">
                        <button type="submit" id="enviar"> Clique  </button>
                    </p> 
                </fieldset>
            </form>   
        </div>     
            <p>Comentários</p>
            <span id="aqui"></span>     
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="ajax.js"></script>
    </body>
</html>

2) Outra alteração que eu realizei foi acrescentar seu ajax.js abaixo do seu formulário:

ajax.js

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

    if($('#enviar').val() == 'Enviando...'){
        return(false);
    }
    var mensagem = $('#mensagem').val()
    if (mensagem == ''){
        alert("Comentário não pode ser vazio")
    }
    else{
        $.ajax({
            url: 'ajax_action.php',
            type: 'post',
            dataType: 'html',
            data: {
                'mensagem': $('#mensagem').val()                
            }
        }).done(function(data){
            $("#aqui").append("<br>").append(data),

            $("#mensagem").val('')                                                                      
        });
    }
});

3) ajax_action.php:

<?php
    $mensagem = $_REQUEST['mensagem'];
        echo 'SEU ARQUIVO PHP: ' . $mensagem;

Espero ter ajudado.

4
  • +1, porém eu peço que coloque dataType: 'text', mesmo que hoje o retorno em html` não sofra validação um dia poderá vir a sofrer, assim como hoje é feito com JSON, o que no futuro poderia vir a invalidar sua resposta. 26/08/2019 às 0:11
  • Leandro, a variável passou para o php mas agora não está executando o "done" do ajax. Substitui por success e não adiantou também. 26/08/2019 às 1:02
  • @PedroHenrique O que vc está esperando do .done?
    – user148170
    26/08/2019 às 1:28
  • @LeandroAlfredo resolvido a questão na resposta abaixo, obrigado. 27/08/2019 às 0:05

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 .