前端代码如何实现搜索按钮点击时传递参数并动态展示结果

首先，需要在前端代码中监听搜索按钮的点击事件。当搜索按钮被点击时，可以使用 JavaScript 获取用户输入的搜索关键字，并将其作为参数传递给后端进行搜索。

如果用户没有输入搜索关键字，可以在搜索按钮被点击时直接调用后端接口获取所有数据，然后在前端展示。

在展示数据方面，可以使用 JavaScript 操作 DOM 元素，动态生成展示内容。可以使用 HTML 和 CSS 来定义样式和布局。

以下是一个简单的示例代码：

HTML 代码：

<input type='text' id='search-input'>
<button id='search-btn'>搜索</button>
<div id='result-container'></div>

JavaScript 代码：

// 获取 DOM 元素
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
const resultContainer = document.getElementById('result-container');

// 监听搜索按钮的点击事件
searchBtn.addEventListener('click', () => {
  // 获取用户输入的搜索关键字
  const keyword = searchInput.value.trim();
  // 如果关键字为空，则直接调用后端接口获取所有数据
  if (!keyword) {
    fetch('/api/getAllData')
      .then(res => res.json())
      .then(data => {
        // 清空展示容器
        resultContainer.innerHTML = '';
        // 动态生成展示内容
        data.forEach(item => {
          const div = document.createElement('div');
          div.innerText = item.name;
          resultContainer.appendChild(div);
        });
      });
  } else {
    // 如果有关键字，则将其作为参数传递给后端进行搜索
    fetch(`/api/search?keyword=${keyword}`)  
      .then(res => res.json())
      .then(data => {
        // 清空展示容器
        resultContainer.innerHTML = '';
        // 动态生成展示内容
        data.forEach(item => {
          const div = document.createElement('div');
          div.innerText = item.name;
          resultContainer.appendChild(div);
        });
      });
  }
});