如何将下拉选框值传入$sortBy并更新DOMDocument视图

一、页面重载版（GET请求） #

1. 前端下拉选框 #

用HTML表单结合下拉选框，选中后提交表单传递排序参数，自动重载页面：

<form method="get" action="">
  <select name="sortBy" onchange="this.form.submit()">
    <option value="default" <?php echo isset($_GET['sortBy']) && $_GET['sortBy'] == 'default' ? 'selected' : ''; ?>>默认排序</option>
    <option value="price_asc" <?php echo isset($_GET['sortBy']) && $_GET['sortBy'] == 'price_asc' ? 'selected' : ''; ?>>价格升序</option>
    <option value="price_desc" <?php echo isset($_GET['sortBy']) && $_GET['sortBy'] == 'price_desc' ? 'selected' : ''; ?>>价格降序</option>
    <!-- 可添加更多排序选项 -->
  </select>
</form>

2. PHP参数处理与抓取逻辑 #

接收前端传递的sortBy参数，拼接带排序参数的目标链接，再执行DOM抓取：

<?php
// 获取排序参数，默认值设为default
$sortBy = isset($_GET['sortBy']) ? $_GET['sortBy'] : 'default';

// 映射本地排序值到目标站点的sort参数（需根据目标站点实际规则调整）
$sortMap = [
    'default' => '',
    'price_asc' => 'price_low',
    'price_desc' => 'price_high'
];
$sortParam = $sortMap[$sortBy] ?? '';

// 拼接目标链接，带上sort参数
$finn_link = 'https://目标站点地址.com/list?' . ($sortParam ? 'sort=' . $sortParam : '');

// 抓取并解析HTML
$dom = new DOMDocument();
@$dom->loadHTMLFile($finn_link); // @屏蔽HTML解析时的非致命警告
$xpath = new DOMXPath($dom);

// 筛选指定类名的article元素
$articles = $xpath->query('//article[contains(@class, "目标类名")]');
?>

<!-- 渲染抓取到的内容 -->
<div class="article-list">
  <?php if ($articles->length > 0): ?>
    <?php foreach ($articles as $article): ?>
      <div class="article-item">
        <?php echo $dom->saveHTML($article); ?>
      </div>
    <?php endforeach; ?>
  <?php else: ?>
    <p>暂无内容</p>
  <?php endif; ?>
</div>

二、AJAX局部更新版（无刷新） #

1. 前端HTML与JS逻辑 #

监听下拉选框的change事件，发送AJAX请求获取更新后的内容，局部替换页面区域：

<select id="sortSelect">
  <option value="default" <?php echo isset($_GET['sortBy']) && $_GET['sortBy'] == 'default' ? 'selected' : ''; ?>>默认排序</option>
  <option value="price_asc" <?php echo isset($_GET['sortBy']) && $_GET['sortBy'] == 'price_asc' ? 'selected' : ''; ?>>价格升序</option>
  <option value="price_desc" <?php echo isset($_GET['sortBy']) && $_GET['sortBy'] == 'price_desc' ? 'selected' : ''; ?>>价格降序</option>
</select>

<div id="articleContainer">
  <!-- 初始内容由PHP渲染 -->
  <?php include 'fetch_articles.php'; ?>
</div>

<script>
document.getElementById('sortSelect').addEventListener('change', function() {
  const sortBy = this.value;
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'fetch_articles.php?sortBy=' + sortBy, true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById('articleContainer').innerHTML = xhr.responseText;
    }
  };
  xhr.send();
});
</script>

2. 后端接口文件（fetch_articles.php） #

单独处理抓取与内容渲染，返回纯内容片段：

<?php
$sortBy = isset($_GET['sortBy']) ? $_GET['sortBy'] : 'default';
$sortMap = [
    'default' => '',
    'price_asc' => 'price_low',
    'price_desc' => 'price_high'
];
$sortParam = $sortMap[$sortBy] ?? '';
$finn_link = 'https://目标站点地址.com/list?' . ($sortParam ? 'sort=' . $sortParam : '');

$dom = new DOMDocument();
@$dom->loadHTMLFile($finn_link);
$xpath = new DOMXPath($dom);
$articles = $xpath->query('//article[contains(@class, "目标类名")]');

if ($articles->length > 0) {
  foreach ($articles as $article) {
    echo '<div class="article-item">' . $dom->saveHTML($article) . '</div>';
  }
} else {
  echo '<p>暂无内容</p>';
}
?>

注意事项 #

• 需根据目标站点的实际排序参数规则，调整$sortMap的映射关系。
• 可通过libxml_use_internal_errors(true)替代@，更规范地处理DOM解析警告。
• 建议添加缓存机制，避免频繁抓取目标站点触发反爬限制。

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