3

Tenho um chat online que funciona com ajax e PHP. Porém, estranhamente, quando eu digito somente uma interrogação (?) e envio o jQuery, retorna-me um erro no console. O ajax entra no error() e a interrogação (?) é inserida no banco, porém com uns caracteres estranhos tipo:

jQuery33106296323571939269_1534100132138.

JavaScript:

$('#envia_chat_id').keyup(function(e){
                    if(e.which === 13 & $('#envia_chat_id').attr('class') === 'envia_chat'){
                        if(trim($('.envia_chat').val()) != ''){
                            var msgenvio = $('.envia_chat').val();
                            var msgrender = msgenvio.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            $('#chat_box').append('<div class="msg user_' + $('.time_user').val() + '"><span>'+ $('.nick_user').val() + ': </span>'+ msgrender +'</div)');
                            $('.envia_chat').val('');
                            $('.envia_chat').removeAttr('class');
                            $('#chat_box').scrollTop($('#chat_box').prop("scrollHeight"));
                            $('#envia_chat_id').attr('placeholder','Aguarde para enviar outra...');
                            console.log('msg='+ msgenvio + '&type=enviaMsg&lobby=' + $('.lobbyid').val() + '&time=' + $('.time_user').val() + '&nick=' + $('.nick_user').val());
                        $.ajax({
                            url:'chat.php',
                            dataType: 'JSON',
                            type: 'POST',
                            data: 'msg='+ msgenvio + '&type=enviaMsg&lobby=' + $('.lobbyid').val() + '&time=' + $('.time_user').val() + '&nick=' + $('.nick_user').val(),
                            success: function(data){
                                console.log(data);
                                setTimeout(function(){
                                    $('#envia_chat_id').attr('class','envia_chat');
                                    $('#envia_chat_id').attr('placeholder','Chat...');
                                }, 4000);

                            },
                            error: function(data){
                                console.log(data);
                                $('#chat_box').append('<div class="msg msg_erro">Tente novamente enviar esta mensagem.</div)');
                                $('#chat_box').scrollTop($('#chat_box').prop("scrollHeight"));
                                $('#envia_chat_id').attr('class','envia_chat');
                                $('#envia_chat_id').attr('placeholder','Chat...');
                            }
                            });
                        }

                    }
});

PHP:

<?php
    session_start();
    function Erro($texto){
        $array = array('status' => $texto);
        return json_encode($array, JSON_PRETTY_PRINT);
    }
    function Sucesso($texto){
        $array = array('status' => $texto);
        return json_encode($array, JSON_PRETTY_PRINT);
    }
    if(isset($_SESSION['login_id']) and !empty($_SESSION['login_id']) and isset($_POST['type']) and isset($_POST['lobby']) and is_numeric($_POST['lobby']) == true){
        require('connection.php');
        $id = $_SESSION['login_id'];
            $acao = $_POST['type'];
            $id_lobby = (is_numeric($_POST['lobby'])==true) ? $_POST['lobby'] : NULL;
            $tempo_atual = date("Y-m-d H:i:s");
                    $msg = (isset($_POST['msg'])==true and $_POST['msg'] != '') ? filter_var($_POST['msg'], FILTER_SANITIZE_SPECIAL_CHARS) : NULL;
                    $time = (isset($_POST['time']) == true and $_POST['time'] == 'azul' or $_POST['time'] == 'laranja' or $_POST['time'] == 'ambos') ? $_POST['time'] : NULL;
                    $nick = (isset($_POST['nick']) == true) ? $_POST['nick'] : NULL;
                    if(trim($msg) != NULL and $time != NULL and $nick != NULL){
                        $insere_msg = mysqli_query($conexao, "INSERT INTO chat (id_user, content, id_lobby, timestamp, time, nick) VALUES ('$id', '$msg', '$id_lobby', '$tempo_atual', '$time', '$nick')");
                        if($insere_msg === true){
                        echo Sucesso('success');
                        }
                    }else{
                        echo Erro('erro_null');
                    }
    }else{
        echo Erro('erro_faltam');
    }
?>
1
  • 1
    Dica: use JSON_PRETTY_PRINT apenas em desenvolvimento. Em produção, o custo de exibir o json formatado pode ser grande, devido aos espaços e quebras de linhas adicionados ao retorno. Commented 17/08/2018 às 13:20

2 Respostas 2

3
+50

Ao enviar o caractere ? sozinho numa das variáveis do data (concatenando as variáveis em forma de string URL, como está fazendo) o jQuery irá tratar a URL como JSONP e irá registrar um callback quando o Ajax retornar a requisição. Como não foi indicado nenhum callback (até porque não era essa a intenção devido a ao dataType ser "JSON"), irá resultar no erro mencionado, tal como:

parsererror Error: jQuery33100166499243115803_1534312585291 was not called

O jQuery criou e tentou chamar um callback jQuery33100166499243115803_1534312585291 que não existe.

Envie os dados no data em forma de objeto, e não em forma de string URL:

data: {
   msg: msgenvio,
   type: 'enviaMsg',
   lobby: $('.lobbyid').val(),
   time: $('.time_user').val(),
   nick: $('.nick_user').val()
},
2
  • Essa forma de enviar no data é a melhor forma? Ou somente para este tipo de erro? Commented 15/08/2018 às 18:50
  • 1
    Acredito ser a melhor forma.
    – Sam
    Commented 15/08/2018 às 20:46
1

Dados de formulário POST quando são enviado para o servidor, geralmente possuem por padrão a formatação application/x-www-form-urlencoded. E, como o próprio nome sugere, os dados são codificados como dados de URL.

Caracteres como ? e & são caracteres especiais numa url, e os mesmos, se forem mandados como conteúdo literal, precisam ser codificados.

Para fazer isso, existem duas formas:

  • Usar o data, como já foi explicado na resposta anterior.
  • Usar a função $.param para montar os parâmetros da sua url.

Veja como o $.param se comporta:

$(function () {

    console.log($.param({question: 'Qual é o seu nome?'}));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Observe que o resultado da chamada de $.param fez com que a string passada mudasse completamente. Isso é porque é usado a codificação para url.

Por curiosidade, o jQuery por padrão usa o $.param no objeto que você passa como parâmetro para data na chamada de $.ajax.

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 .