html动态选择查询条件flask
时间: 2023-11-03 22:05:44 浏览: 37
可以通过使用 JavaScript 和 AJAX 来实现动态选择查询条件。首先,在 HTML 中定义一个选择器,然后在 JavaScript 中监听选择器的变化事件,当选择器发生变化时,向后端发送 AJAX 请求,获取符合条件的数据并将其呈现在页面上。
以下是一个简单的示例代码:
HTML:
```html
<select id="condition">
<option value="name">姓名</option>
<option value="age">年龄</option>
<option value="gender">性别</option>
</select>
<input type="text" id="value">
<button id="search-btn">查询</button>
<div id="result"></div>
```
JavaScript:
```javascript
$(document).ready(function() {
$('#condition').change(function() {
var selected = $(this).val();
if (selected === 'name' || selected === 'age' || selected === 'gender') {
$('#value').show();
} else {
$('#value').hide();
}
});
$('#search-btn').click(function() {
var condition = $('#condition').val();
var value = $('#value').val();
$.ajax({
url: '/search',
type: 'POST',
data: {
'condition': condition,
'value': value
},
success: function(response) {
$('#result').html(response);
},
error: function(error) {
console.log(error);
}
});
});
});
```
Flask 后端代码:
```python
@app.route('/search', methods=['POST'])
def search():
condition = request.form.get('condition')
value = request.form.get('value')
# 根据条件查询数据
# ...
return render_template('result.html', data=data)
```
在 Flask 中,可以使用 request.form.get() 方法获取 POST 请求中提交的表单数据。根据条件查询数据后,可以将结果渲染到一个 HTML 模板中,然后通过 AJAX 请求将该模板呈现在页面上。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)