Help with ajax to send new variable value on this page without refresh via radio button

Navigation
1

I'm trying to make a table with a radio that when I click, it changes the order that the contents of the table is displayed, I saw that the way to do this is with ajax, but I do not have much time remaining, and from what I saw ajax I could not figure out how to use it. if someone can help me to show how it would look like an ajax function that sends the value from within a radius to the php on the same page without giving refresh, thank you very much, just missing it for the end of my tcc (high school), and I do not understand anything about ajax. follows the ajax function below and my failed attempt to make the 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;
    }
    
asked by anonymous 06.11.2017 / 21:54

1 answer

1

You can work out 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"];
    }       
?>

In this way you can recover all the data, according to your select.

    
06.11.2017 / 22:50
webService php + json ajax for notification