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

我想要实现的是： 我有一个HTML/PHP页面，显示网站的主页。我在这一页上有一个高分部分。highscore页面的数据从数据库中检索。有一个选择框，您可以在其中选择高分的排序方式

我希望能够从下拉列表中选择一个选项。选择某个选项后，数据的显示方式会动态更改，而不会刷新页面

下面是home.php页面上的代码，其中包含highscore部分

<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>

我使用Mysqli_查询从数据库中获取所有数据。我传入了一个变量来代替orderby，这样我就可以更改检索数据的方式

我知道我可以使用Ajax获取数据，但我不确定如何做到这一点，我已经看了这个论坛上发布的许多其他问题

---

任何帮助都将不胜感激

您可以使用highscores.php的名称创建另一个页面，并在那里获取所有代码。然后在页面加载上调用以动态获取该div中的分数

  $(document.ready(function(){
//on page load,for the first time.
$('#highscore').load('http://site_url/highscores.php');
//on selectbox change
$('#selectbox').change(function(){
 $.post("highscores.php", {sort: val}, function(data){
    //perform sorting and return the data div.
 $('#highscore').html(data);
});
 })
});
//// homepage section where the scores load,add a div by the id 
<div id="highscore"></div>

//////// highscore page
<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>

---

使用JQuery AJAX，如下所示：

制作两个页面，一个显示dataindex.php，另一个从中获取数据process.php

index.php的内容类似于：

<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>

var scores = [
  {
    "name" : "Adam",
    "score": "100"
  },
  {
    "name" : "Bert",
    "score": "150"
  },
  {
    "name" : "Cecilia",
    "score": "75"
  } ];

scores.sort(function(a, b) {
 return parseFloat(a.scores) - parseFloat(b.scores);
});

---

您需要做几个更改，首先您需要更改选择框代码，这样您就需要编写一个on change函数，读取javascript中的值，然后执行AJAX调用。第二个是在ajax调用从服务器获得响应后，您需要执行DOM操作并以所需格式填充值

比如说

$(document).on("change", "#select_box_id", function(){
  //your ajax call here based on the value 
});

我不知道您是否使用，如果不导入文件中的库并使用它，这将使您的生活更简单

---

查看基本AJAX的这一点

如果您不希望每次有人更改排序时都从数据库重新加载实时高分，那么最好将分数加载到JavaScript对象中，然后使用JavaScript重新排列

为此，您需要有一个div元素，您可以在其中重新创建data+表结构，如果需要的话，可以在使用sort对数组进行排序后使用类似innerHTML的内容。例如，您可以使用下拉列表中的onChange事件来运行它

如果您有一个div，例如：

<div id="targetdiv"></div>

您的排序算法可能类似于：

<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>

var scores = [
  {
    "name" : "Adam",
    "score": "100"
  },
  {
    "name" : "Bert",
    "score": "150"
  },
  {
    "name" : "Cecilia",
    "score": "75"
  } ];

scores.sort(function(a, b) {
 return parseFloat(a.scores) - parseFloat(b.scores);
});

然后只需将结果保存到for循环中的字符串变量或任何您想要的内容，并将其输出到targetdiv：

var intostring = "By SCORES!<br><br>"

for (var index = 0; index < scores.length; ++index) {
    intostring += scores[index]["name"] + ": " + scores[index]["score"] + "<br>";
}

document.getElementById('targetdiv').innerHTML = intostring;

为了更好地演示上述代码，我制作了一个JSFIDLE示例：

---

无需更改和下拉菜单。

这项功能非常棒！非常感谢。我唯一的问题是，在选择一个选择选项之前，不会加载任何highscore。我假设我只需要为select选项设置一个默认值。非常感谢。