HTML通过Ajax在同一页面上将所选选项发送到PHP

Question

What I want to acheive: I have a HTML/PHP page where I display the home page of the website. I have a highscore section on this page. The data for the highscore page is retrived from a database. There is a Select box where you can choose how the highscores are sorted.

The highscore section on the page

I want to be able to select an option from the dropdown. When an option is selected, the way that the data is displayed changes dynamically, without the page refreshing.

Here is the code on the home.php page (Where the highscore section is)

<div class="third third-center">
            <h2>Highscores</h2>
            <div class="sortby">
                <form id="" method="post" action="home.php">
                    <select id="selectForm" name="sort">
                      <option value="score ASC">Score Ascending</option>
                      <option value="score DESC">Score Descending</option>
                      <option value="userName ASC">Name Ascending</option>
                      <option value="userName DESC">Name Descending</option>
                    </select>
                </form>
            </div>
            <div class="inner">
                <table>
                    <tr>
                        <th style="font-size: 20px">Position</th>
                        <th style="font-size: 20px">Name</th>
                        <th style="font-size: 20px">Score</th>
                    </tr>
                    <?php
                        $i = 0;

                        $choice = "score ASC";

                        $search = mysqli_query($connect, "SELECT * FROM accounts ORDER BY ".$choice."") or die(mysqli_error($connect));


                        while($row = mysqli_fetch_array($search)){
                            $i++;
                            echo "<tr>";
                            echo "<th>" . $i . "</th>";
                            echo "<th>" . $row['userName'] . "</th>";
                            echo "<th>" . $row['score'] . "</th>";
                            echo "</tr>";
                        }
                    ?>
                </table>
            </div>
        </div>

I am using the Mysqli_Query to get all the data from the database. I am passing in a variable in place of the ORDER BY so that I can change the way the data is retrieved.

I know I can use Ajax to get the data, but Im not sure how to do it, I have looked at many other questions posted on this forum.

Any help would be greatly appreciated!

Answer 1

Use JQuery AJAX something like so:

Make two pages one where you display data(index.php) and other from where you fetch data (process.php).

The content of index.php would be something like:

<div class="third third-center">
            <h2>Highscores</h2>
            <div class="sortby">
                <form id="" method="post" action="home.php">
                    <select onChange="getData();" id="selectForm" name="sort">
                      <option value="score ASC">Score Ascending</option>
                      <option value="score DESC">Score Descending</option>
                      <option value="userName ASC">Name Ascending</option>
                      <option value="userName DESC">Name Descending</option>
                    </select>
                </form>
            </div>
            <div class="inner">
                <table>
                    <thead>
                    <th>
                        <th style="font-size: 20px">Position</th>
                        <th style="font-size: 20px">Name</th>
                        <th style="font-size: 20px">Score</th>
                    </th>
                    </thead>
                    <tbody id="data"></tbody>
                </table>
            </div>
        </div>

The code of process.php should be something liek:

            <?php
                $i = 0;
                if($_REQUEST['sortBy'] == "score ASC")
                {
                $choice = "score ASC";
                }
                 else if ()//and so on

                $search = mysqli_query($connect, "SELECT * FROM accounts ORDER BY ".$choice) or die(mysqli_error($connect));


                while($row = mysqli_fetch_array($search)){
                    $i++;
                    echo "<tr>";
                    echo "<th>" . $i . "</th>";
                    echo "<th>" . $row['userName'] . "</th>";
                    echo "<th>" . $row['score'] . "</th>";
                    echo "</tr>";
                }
            ?>

Your Javascript should be like:

            function getData()
            {
            $.ajax({
                url     : 'process.php',
                method    : 'GET',
                data:{ sortBy:$('#selectForm').val() }
                success   : function(response)
                {
                   $('#data').html(response);
                },
                error : function(e)
                {
                    alert('error');
                }
            });
          }