使用AJAX更新ORDER BY时返回整页HTML的问题求助

尝试用<select>结合AJAX在HTML/PHP页面实现商品排序：默认$sort = 'id'，选中选项时按SFprice排序。当前代码能返回排序后的商品，但会把整个HTML页面克隆到id="results"的div里，而非仅更新商品列表。调整过ID位置、改用class都没解决，想问是否需要把AJAX逻辑放到单独文件里。

用户提供的页面代码：

<form method="post" id="sort-form">
  <label for="sort">排序方式：</label>
  <select name="sort" id="sort">
    <option value="SFprice ASC">从低到高</option>
    <option value="SFprice DESC">从高到低</option>
  </select>
</form>


<div class="row">

<?php
  // 初始化$sort变量为默认值
  $sort = "id";
  
  // 检查表单是否提交
  if(isset($_POST["sort"])) {
    $sort = $_POST["sort"];
  }
  
  // 准备并执行包含所选排序选项的SQL语句
  $stmt = $dbh->prepare("SELECT * FROM `products-table` ORDER BY $sort LIMIT 8");
  $stmt->execute();
  $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

  <?php foreach ($result as $fetch) { ?>
    <div id="results" class="col-md-3 col-6 mb-2 mt-2">
      <div class="card">
        <div class="card-title">
          <h6><?php echo $fetch['title'];?></h6>
        </div>
        <div class="card-body">
          <center>
            <img src="/images/products/<?php echo $fetch['ProdImg'];?>">
          </center>
          <p>起售价：<?php echo $fetch['SFprice'];?></p>
        </div>
        <div class="card-footer">
          <a href="Item?title=<?php echo $fetch['title'];?>">查看详情</a>
        </div>
      </div>
    </div>
  <?php
  }
  ?>
</div>

<script type="text/javascript">
$(document).ready(function() {
  // 监听select元素的变化
  $('#sort').on('change', function() {
    // 获取选中的值
    var sortValue = $(this).val();
    
    // 发送AJAX请求更新结果
    $.ajax({
      type: 'POST',
      url: '',
      data: { sort: sortValue },
      success: function(response) {
        // 用新数据更新结果
        $('#results').empty().append(response);
      }
    });
  });
});
</script>

核心问题分析 #

问题根源有三个：

1. AJAX请求当前页面时，服务器返回整个页面的HTML（包括表单、脚本等所有内容），而非仅商品列表
2. id="results"被放在循环里，生成多个重复ID，不符合HTML规范，JS选择器只会匹配第一个
3. 直接把$_POST['sort']拼入SQL语句，存在SQL注入风险

具体修复步骤 #

1. 修正HTML结构，确保ID唯一 #

把id="results"移到循环外的容器上，避免重复ID：

<div class="row" id="results">
  <?php foreach ($result as $fetch) { ?>
    <div class="col-md-3 col-6 mb-2 mt-2">
      <!-- 商品卡片内容保持不变 -->
    </div>
  <?php } ?>
</div>

2. 在当前页面区分普通请求和AJAX请求 #

通过HTTP头判断是否为AJAX请求，AJAX请求仅返回商品列表：

<?php
// 初始化$sort变量为默认值
$sort = "id";

// 安全校验：仅允许指定排序选项，防止SQL注入
$allowedSorts = ["id", "SFprice ASC", "SFprice DESC"];
if(isset($_POST["sort"]) && in_array($_POST["sort"], $allowedSorts)) {
  $sort = $_POST["sort"];
}

// 执行SQL查询
$stmt = $dbh->prepare("SELECT * FROM `products-table` ORDER BY $sort LIMIT 8");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 判断是否为AJAX请求
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
  // 仅输出商品列表HTML
  foreach ($result as $fetch) {
?>
    <div class="col-md-3 col-6 mb-2 mt-2">
      <div class="card">
        <div class="card-title">
          <h6><?php echo $fetch['title'];?></h6>
        </div>
        <div class="card-body">
          <center>
            <img src="/images/products/<?php echo $fetch['ProdImg'];?>">
          </center>
          <p>起售价：<?php echo $fetch['SFprice'];?></p>
        </div>
        <div class="card-footer">
          <a href="Item?title=<?php echo $fetch['title'];?>">查看详情</a>
        </div>
      </div>
    </div>
<?php
  }
  exit; // 终止脚本，避免输出后续页面内容
}
?>

3. 调整AJAX代码，直接替换容器内容 #

$(document).ready(function() {
  $('#sort').on('change', function() {
    var sortValue = $(this).val();
    $.ajax({
      type: 'POST',
      url: window.location.href,
      data: { sort: sortValue },
      success: function(response) {
        $('#results').html(response); // 直接替换容器内容
      }
    });
  });
});

4. 关于单独文件的问题 #

推荐将AJAX逻辑放到单独文件（比如get-sorted-products.php）：

• 把数据库查询、商品列表输出的逻辑单独放在该文件中
• AJAX的url设置为'get-sorted-products.php'
• 这种方式代码结构更清晰，便于维护，也避免当前页面的冗余代码

内容的提问来源于stack exchange，提问作者exitmivce