可以使用前端框架(如Vue、React等)来实现此功能。首先,在搜索按钮上绑定一个点击事件,当点击搜索按钮时,触发该事件。在事件处理程序中,可以使用AJAX来发送一个GET请求,向后端请求数据。如果不想携带参数,则可以将请求URL中的参数部分置为空字符串。当请求成功后,可以将返回的数据渲染到页面上,展示效果也可以通过前端样式来控制。具体实现可以参考以下代码示例:

<!-- HTML代码 -->
<div id="app">
  <input type="text" v-model="keyword">
  <button @click="search">搜索</button>
  <ul v-if="results.length">
    <li v-for="item in results">
      {{item.name}}
    </li>
  </ul>
  <p v-else>暂无搜索结果</p>
</div>
// Vue代码示例
new Vue({
  el: '#app',
  data: {
    keyword: '',
    results: []
  },
  methods: {
    search() {
      // 发送GET请求,向后端请求数据
      axios.get('/api/search', {
        params: {
          keyword: this.keyword
        }
      }).then(response => {
        this.results = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
})

在上述代码中,keywordresults分别表示搜索关键字和搜索结果。当点击搜索按钮时,会调用search方法,该方法使用axios库来发送GET请求,向后端请求数据。在请求成功后,将返回的数据赋值给results,从而更新页面上的展示效果。如果没有搜索结果,则会显示"暂无搜索结果"。


原文地址: https://www.cveoy.top/t/topic/0aY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录