如何从URL获取参数？及网页表格Firebase数据获取代码问题

这里有几种实用的方法，你可以根据项目需求选择：

方法1：使用现代浏览器的URLSearchParams API #

这是目前最简洁高效的方式，支持绝大多数现代浏览器：

// 假设当前URL是：https://your-site.com?itemId=456&tag=book
const urlParams = new URLSearchParams(window.location.search);
const itemId = urlParams.get('itemId'); // 得到 "456"
const tag = urlParams.get('tag'); // 得到 "book"

// 检查某个参数是否存在
if (urlParams.has('itemId')) {
  console.log('找到产品ID：', itemId);
}

方法2：兼容旧浏览器的手动解析方案 #

如果需要支持IE这类老旧浏览器，可以自己实现一个解析函数：

function getUrlParam(paramName) {
  const url = window.location.href;
  paramName = paramName.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp(`[?&]${paramName}(=([^&#]*)|&|#|$)`);
  const results = regex.exec(url);
  
  if (!results) return null;
  if (!results[2]) return '';
  // 解码特殊字符并替换空格
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 使用示例
const itemId = getUrlParam('itemId'); // 得到 "456"

看你的代码已经在监听Sell_Products节点的child_added事件获取数据了，接下来我帮你补全表格生成的逻辑，同时优化一些细节：

首先，确保页面上有一个用于展示数据的表格结构：

<table id="productsTable" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>分类</th>
      <th>产品描述</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="productsBody">
    <!-- 数据行会动态插入到这里 -->
  </tbody>
</table>

然后修改你的JavaScript代码，添加表格行的创建逻辑，同时增加用户登录状态判断（避免currentUser为null时报错）：

function ondemand() {
  alert('Welcome');
  
  // 先检查用户是否已登录
  const user = firebase.auth().currentUser;
  if (!user) {
    alert('请先登录后再操作！');
    return;
  }
  
  const userId = user.uid;
  const fbRef = firebase.database().ref().child("Sell_Products");
  
  // 清空表格原有内容，防止重复加载
  document.getElementById('productsBody').innerHTML = '';
  
  fbRef.on("child_added", snap => {
    const key = snap.key;
    const name = snap.child("name").val();
    const price = snap.child("price").val();
    const category = snap.child("category").val();
    const description = snap.child("description").val(); // 补全描述字段
    
    // 创建表格行
    const row = document.createElement('tr');
    
    // 填充单元格内容
    row.innerHTML = `
      <td>${name || '未填写'}</td>
      <td>${price || '0'}</td>
      <td>${category || '未分类'}</td>
      <td>${description || '暂无描述'}</td>
      <td><button onclick="removeProduct('${key}')">删除</button></td>
    `;
    
    // 将行添加到表格主体
    document.getElementById('productsBody').appendChild(row);
  });
}

// 可选：添加删除产品的功能
function removeProduct(productKey) {
  if (confirm('确定要删除这个产品吗？')) {
    firebase.database().ref().child("Sell_Products").child(productKey).remove()
      .then(() => {
        alert('产品删除成功');
      })
      .catch(error => {
        alert('删除失败：' + error.message);
      });
  }
}

几个重要提醒： #

• 记得在页面加载完成后触发ondemand()，比如绑定到按钮点击：<button onclick="ondemand()">加载产品列表</button>
• 如果Sell_Products节点数据量很大，建议使用limitToLast()或分页逻辑优化加载性能
• 确保Firebase数据库规则允许已登录用户读取Sell_Products节点的数据，避免权限错误

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