如何在点击搜索按钮的同事 也不携带的参数传过来 然后展示也变了前端代码如何实现
可以使用前端框架(如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)
})
}
}
})
在上述代码中,keyword和results分别表示搜索关键字和搜索结果。当点击搜索按钮时,会调用search方法,该方法使用axios库来发送GET请求,向后端请求数据。在请求成功后,将返回的数据赋值给results,从而更新页面上的展示效果。如果没有搜索结果,则会显示"暂无搜索结果"。
原文地址: https://www.cveoy.top/t/topic/0aY 著作权归作者所有。请勿转载和采集!