Communication between PHP files with Ajax

Question

Good morning, you guys.

I’m starting with PHP, and I’m trying to do some practical tests.

I created an input text and when pressing the "ENTER" key is called an ajax doing post of this data and calls the file control.php, but in the browser log is not mentioning nor the "Success" message of .done nor "Error" of .fail, let alone the message of controle.php.

Can you explain to me what is happening in these scripts?

tela.php

<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>

<form>
    <div class="row">
        Campo de Texto: 
        <input id="id_text" style="height: 25px; font-size:12px; width: 100px" type ="text">
    </div>
</form>

script js.

$(document).ready(function(){
var texto = document.getElementById('id_text').value;

$('#id_text').bind("enterKey",function(e){
    console.log("Pressionado ENTER "+ texto);
    $.ajax({
        type: 'POST',
        url: "controle.php",
        data: {
            'texto': texto
        }
    }).done(function(data) {
        console.log("Sucesso");
    }).fail(function(data){
        console.error("Ajax Error");
    });
});
$('#id_text').keyup(function(e){
    if(e.keyCode == 13){
        $(this).trigger("enterKey");
    }
});
});

php control.

<?php
$reqmethod = $_SERVER['REQUEST_METHOD'];

if($reqmethod == 'POST'){
    $texto  = filter_input(INPUT_POST, "texto");
    echo "O texto é: " + $texto;
}else{
    echo "Não é um POST";
}

?>

Answer 1

Sorry for the delay in answering.

If you still have problems, follow code and considerations:

• In.php control in phrase concatenation there was a '+' as operator. This notation is javascript, to make the union between two texts in php if using the operator '.';
• The accentuation gave problem, so I put a utf8_encode().
• In script.js , brought an Alert to show the phrase typed.

follows altered screens for comparison and study:

php control.

<?php
$reqmethod = $_SERVER['REQUEST_METHOD'];

if($reqmethod == 'POST'){
    $texto  = filter_input(INPUT_POST, "texto");
    echo utf8_encode("O texto é: ". $texto);
}else{
    echo "Não é um POST";
}

?>

script js.

$(document).ready(function(){
$('#id_text').bind("enterKey",function(e){
    var texto = document.getElementById('id_text').value;

    console.log("Pressionado ENTER "+ texto);
    $.ajax({
        type: 'POST',
        url: "controle.php",
        data: {
            'texto': texto
        }
    }).done(function(data) {
        console.log("Sucesso" + data);
        alert(unescape(data));
    }).fail(function(data){
        console.error("Ajax Error");
    });
});
$('#id_text').keyup(function(e){
    if(e.keyCode == 13){
        $(this).trigger("enterKey");
    }

});

$(document).on('submit','form',function(e){
    e.preventDefault();
})

});

tela.php

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-3.3.1.js" charset="utf-8"></script>
<script src="script.js"></script>

<form>
    <div class="row">
        Campo de Texto: 
        <input id="id_text" style="height: 25px; font-size:12px; width: 100px" type ="text">
    </div>
</form>