Ajuda com ajax e php

[Gimenez]

Boa tarde a todos, por favor quem puder me ajudar ,  sou novato em programação e a semanas estou apanhando para fazer uma requisição por ajax e retornar os valores  para os inputs mas não vai, eu não sei nem como validar se as variáveis estão chegando no arquivo php.

Desde já agradeço a ajuda. Obrigado

 

 

[Marcelo_2]

4 horas atrás, Gimenez disse:

eu não sei nem como validar se as variáveis estão chegando no arquivo php

Cara, pesquise sobre var_dump php

[wash]

Boa tarde!
Tem que acompanhar pela aba network do devtools

 

[wash]

A) abra o devtools, e altere o valor do input#pontos para que seja feita a request ajax
B) abra a aba network
C) clique na requisição
D) clique em preview

[Frank K Hosaka]

A resposta do Wash é super bacana, mas eu não consegui executar o Ajax por aqui. Por outro lado, eu encontrei um código JavaScript sem o Ajax que funcionou, mas ao invés de consultar o MySQL, simplifiquei só para fazer uma simples multiplicação, para demonstrar que o problema é o Ajax:
 

arquivo index.php
<script>
async function teste()
{
    form = new FormData()
    form.append('ch', ch.value)
    form.append('pontos',pontos.value)
    response=await fetch('funcFinancas.php',{method:"POST",body: form})
    responseData = await response.json();
    pto.value=responseData.pto
    base.value=responseData.base
}
</script>
<table>
Tabuada do 2
<tr><td>ch<td><input id=ch value=1><td><input type=button id=base>
<tr><td>pontos<td><input id=pontos value=2><td><input type=button id=pto>
<tr><td><input type=submit onclick=teste()>
</table>
  
arquivo funcFinancas.php
<?php
$ch=$_POST['ch'];
$pontos=$_POST['pontos'];
$dados['base']=$ch*2;
$dados['pto']=$pontos*2;
echo json_encode($dados);

 

Editado Julho 6 por Frank K Hosaka

[Frank K Hosaka]

Consegui consertar o código do Ajax! Ao contrário da minha primeira solução que usa um botão para disparar o JavaScript, o código abaixo não usa nenhum botão, mas executa o código depois de atualizar o <input id=pontos>

arquivo index.php
<table>
Tabuada do 2
<tr><td>ch<td><input id=ch value=1><td><input type=button id=base>
<tr><td>pontos<td><input id=pontos><td><input type=button id=pto>
</table>
<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$(document).ready(function()
{
    $('#pontos').blur(function()
    {
        $.ajax(
        {
            url:'funcFinancas',
            type: 'POST',
            data: {pontos: $("#pontos").val(),ch: $("#ch").val()},
            dataType:'json',
            success: function(data)
            {
                $('#pto').val(data.pto)
                $('#base').val(data.base)
            }
        })
    })
})
</script>

arquivo funcFinancas.php
<?php
$ch=$_POST['ch'];
$pontos=$_POST['pontos'];
$dados['base']=$ch*2;
$dados['pto']=$pontos*2;
echo json_encode($dados);

 

Editado Julho 6 por Frank K Hosaka

[Frank K Hosaka]

Finalmente, para quem não sabe nada de programação em JavaScript e Ajax, aqui está o mesmo programa usando só os recursos do PHP. Ele é um péssimo exemplo de programação, mas funciona.

arquivo index.php
<?php
$ch=1;
$pontos=2;
$base=$pto="";
if(isset($_POST['pontos']))
{
    $base=$_POST['ch'] * 2;
    $pto=$_POST['pontos'] * 2;
    $ch=$_POST['ch'];
    $pontos=$_POST['pontos'];
}
?>
<form method=post>
    <table>
    Tabuada do 2
    <tr>
        <td>ch<td><input name=ch value=<?=$ch?>>
        <td><input type=button value=<?=$base?>>
    <tr>
        <td>pontos<td><input name=pontos value=<?=$pontos?>>
        <td><input type=button value=<?=$pto?>>
    <tr><td><input type=submit>
    </table>
</form>

 

Editado Julho 6 por Frank K Hosaka