1

Estou fazendo um teste com ajax e php, porém está retornando um valor nada a ver

teste2.html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script src="jquery-3.3.1.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            Nome: <input type="text" name="nome">
            <input type="button" value="Enviar" onclick="enviar(name.valueOf())">
            <p id="abc"> </p>
        </div>
        <script>
            function enviar(nome) {
                $.ajax({
                    url: "teste2.php",
                    type: "POST",
                    data: "nome=" + nome,
                    dataType: "html"

                }).done(function (resposta) {
                    console.log(resposta);


                }).fail(function () {
                    console.log("Falha");

                }).always(function () {
                    console.log("Ok");
                });
            }
        </script>
    </body>
</html>

teste2.php

<?php

if($_POST){
    $vlr = $_POST['nome'];

    if($vlr == 'Leandro'){
        return true;
    } else {
        return false;
    }
}

vem isso de retorno:

<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: nome in C:\wamp64\www\php_pdo\projeto\teste2.php on line <i>6</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.4036</td><td bgcolor='#eeeeec' align='right'>403528</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp64\www\php_pdo\projeto\teste2.php' bgcolor='#eeeeec'>...\teste2.php<b>:</b>0</td></tr>
</table></font>

Mais uma dúvida, como por o resultado no paragrafo(em baixo do input)? Tentei document.getElementyId("abc").innerHTML = resposta;, mas da o erro que document.getElementyId não é uma função.

3
  • O certo é document.getElementById("abc").innerHTML = resposta;.. veja a diferença para getElementyId. Quanto ao retorno do Ajax, está retornando um erro gerado pela página PHP requisitada.
    – Sam
    Commented 31/07/2018 às 2:35
  • O teste2.php só tem esse conteúdo mostrado?
    – Sam
    Commented 31/07/2018 às 2:52
  • Sim, só tem esse código em teste2.php
    – Leandro
    Commented 31/07/2018 às 2:55

2 Respostas 2

1

Da forma que está fazendo, a variável nome no data: do Ajax está indo vazia para o PHP, causando o erro.

O primeiro problema observado foi nesse valor: name.valueOf(). O name é uma variável global do window, não tem a ver com o que você quer passar. Poderia fazer nome.valueOf().value DESDE QUE o input tivesse um id="nome". Você poderia até trocar o name="nome" por id="nome" já que vai usar Ajax.

Mas eu sugeria que você pegasse o valor do input dentro da função enviar() em vez de passar como parâmetro, deixando apenas onclick="enviar()" no botão.

Na função, usando jQuery, você pegaria o valor do input pelo name com:

var nome = $("[name='nome']").val(); ou var nome = $("input[name='nome']").val();.

Seu HTML e script ficariam:

<div>
   Nome: <input type="text" name="nome">
   <input type="button" value="Enviar" onclick="enviar()">
   <p id="abc"> </p>
</div>
<script>
function enviar() {

    var nome = $("[name='nome']").val();

    $.ajax({
        url: "teste2.php",
        type: "POST",
        data: "nome=" + nome,
        dataType: "html"

    }).done(function (resposta) {
        console.log(resposta);
        if(resposta == "true"){
           console.log("correto");
        }else{
           console.log("errado");
        }


    }).fail(function () {
        console.log("Falha");

    }).always(function () {
        console.log("Ok");
    });
}
</script>

Em relação o PHP, esses returns estão incorretos, com isso, o retorno do Ajax pela variável resposta virá vazio. Você precisa fazer um echo no PHP para retornar alguma coisa. Você poderia fazer:

<?php
if($_POST){
    $vlr = $_POST['nome'];

    if($vlr == 'Leandro'){
        echo "true";
    } else {
        echo "false";
    }
}
?>

E no Ajax verificar através de um if se o retorno é a string "true" ou "false" (não confundir com booleanos true e false. Você espera receber uma string do PHP). Em vez de retornar "true" ou "false", você poderia usar quaisquer strings, por exemplo, "certo" e "errado", "valido" e "invalido" etc., isso fica a seu critério.

Quanto ao document.getElementyId, é erro de sintaxe. O correto é document.getElementById. Faltou um "B" antes do "y".

10
  • Só uma dúvida, sempre está indo para o else no ajax, e continua mostrando o mesmo retorno no console (aquele que citei na pergunta)
    – Leandro
    Commented 31/07/2018 às 3:58
  • Vc copiou exatamente o código que coloquei na resposta?
    – Sam
    Commented 31/07/2018 às 4:03
  • Sim, até copiei de novo para verificar, mas continua do mesmo jeito
    – Leandro
    Commented 31/07/2018 às 4:05
  • Já fiz isso, e o retorno continua o mesmo.
    – Leandro
    Commented 31/07/2018 às 4:17
  • Descobri que ele está mostrando aquele código aleatório no console.log(resposta)
    – Leandro
    Commented 31/07/2018 às 4:23
-1

Tomei a liberdade de mexer um pouco no código

    <html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
    <form id="form" method="post" action="action.php">
        <label> Nome:
            <input type="text" name="nome">
        </label>
        <input type="submit" value="Enviar">
        <br/>
        <span id="result"></span>
    </form>
</div>
<script>
    $("#form").submit(function (e) {
        e.preventDefault();

        var form = $(this);
        var url = form.attr('action');
        let ajax =  $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),

        });
    ajax.done(function (result) {
        $('#result').html(result)
    }) ;

});

action.php

if ($_POST) {

    $vlr = isset($_POST['nome']) ? $_POST['nome']  : "";

    if($vlr == 'Leandro'){
        $result =  "Nome válido";
    } else {
        $result  = "Nome inválido";
    }


}

echo $result;

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 .