Help with ajax to send new variable value in emsma page without refresh via radio button

Question

I’m trying to make a table with radio that when I click, changes the order that is displayed the table content, I saw that the way to do this is with ajax, but I do not have much time left, and from what I saw in ajax I could not understand to use this. If someone can help me show how an ajax function that sends the value from inside a radio to php on the same page without giving refresh, thank you very much, just missing this for the end of my tcc (high school), and I do not understand anything ajax. follows below the ajax function and my failure to try to make radios change the value of $mode.

echo "<form name='busca' method='GET' >";
      echo "<table><tr><td>";
      echo "<input type='radio' checked name='modo' value='0' onSelect=" $modo = 0; ">Mais curtidos</td><td>";
      echo "<input type='radio' name='modo' value='1' onSelect=" $modo = 1; ">Menos curtidos</td></tr><td>";
      echo "<input type='radio' name='modo' value='2' onSelect=" $modo = 2; ">Mais novos</td><td>";
      echo "<input type='radio' name='modo' value='3' onSelect=" $modo = 3; ">Mais antigos</td></tr>";
      echo "</table>";

       switch($modo){
            case "0":
                    $varsql = "SELECT * FROM $tab WHERE TIPO='$tipo' ORDER BY likes DESC";
                    break;

            case "1": 
                    $varsql = "SELECT * FROM $tab WHERE TIPO='$tipo' ORDER BY likes ASC";
                    break;

           case "2": 
                    $varsql = "SELECT * FROM $tab WHERE TIPO='$tipo' ORDER BY id DESC";
                    break;


          case "3": 
                    $varsql = "SELECT * FROM $tab WHERE TIPO='$tipo' ORDER BY id ASC";
                    break;
    }

Answer 1

You can elaborate this way, with jquery and search the data via ajax, and list.

Page for verification:

<table>
    <tr>
        <td><input type='radio' name='modo' class='modo' value='0'>Mais curtidos</td>
        <td><input type='radio' name='modo' class='modo' value='1'>Menos curtidos</td>
    </tr>
    <tr>
        <td><input type='radio' name='modo' class='modo' value='2'>Mais novos</td>
        <td><input type='radio' name='modo' class='modo' value='3'>Mais antigos</td>    
    </tr>
<table>

<div id="listagem"></div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>
    $(".modo").click(function(){
        var modo = $(this).val();
        $.ajax({
            url: 'listagem.php',
            type: 'post',
            data: {modo:modo},
            success: function(data) {
                $("#listagem").html(data); // data é o retorno da sua pagina
            }
        });             
    });
</script>

Listing.php

<?php
    $modo = $_POST['modo']; // Este é o modo que veio do radio selecionado

    switch($modo){
        case "0":
        $varsql = "SELECT * FROM ".$tab." WHERE TIPO = '".$tipo."' ORDER BY likes DESC";
        break;

        case "1": 
        $varsql = "SELECT * FROM ".$tab." WHERE TIPO = '".$tipo."' ORDER BY likes ASC";
        break;

        case "2": 
        $varsql = "SELECT * FROM ".$tab." WHERE TIPO = '".$tipo."' ORDER BY id DESC";
        break;

        case "3": 
        $varsql = "SELECT * FROM ".$tab." WHERE TIPO = '".$tipo."' ORDER BY id ASC";
        break;
    }

    while($row=mysqli_fetch_array($conn, $varsql)){
        echo $row["campo"];
    }       
?>

This way you can recover all the data as per your select.