java后台传一个list类型的fileName里面有三个字符串 现在需要在html接收用tr td显示出来
时间: 2024-02-20 22:59:56 浏览: 65
好的,可以使用Java的Spring框架来实现。
首先,在后台将list类型的fileName传给前端:
```
@GetMapping("/")
public String index(Model model) {
List<String> fileName = Arrays.asList("file1.txt", "file2.txt", "file3.txt");
model.addAttribute("fileName", fileName);
return "index";
}
```
然后,在HTML页面中使用Thymeleaf模板语言来遍历list,生成表格:
```
<table>
<tr>
<th>文件名</th>
</tr>
<tr th:each="file : ${fileName}">
<td th:text="${file}"></td>
</tr>
</table>
```
这样就可以将list中的文件名显示在表格中了。
相关问题
后台传一个list类型的fileName里面有三个字符串 现在需要在html接收用tr td显示出来
好的,可以使用Jinja2模板语言来实现。
首先,在后台将list类型的fileName传给前端:
```
@app.route('/')
def index():
fileName = ['file1.txt', 'file2.txt', 'file3.txt']
return render_template('index.html', fileName=fileName)
```
然后,在HTML页面中使用Jinja2模板语言来遍历list,生成表格:
```
<table>
<tr>
<th>文件名</th>
</tr>
{% for file in fileName %}
<tr>
<td>{{ file }}</td>
</tr>
{% endfor %}
</table>
```
这样就可以将list中的文件名显示在表格中了。
用python、sqlite3、css、jQuery(ajax) 、html写代码,实现一个基于SQLite数据库的搜索框功能: : 关键要求是:搜索框内要有自动联想提示功能,因此此块代码每行添加注释。 假设我的数据库名称是entable.db;表名为core;表中字段为ID、EN、CON共3个;并假设搜索框输入的关键词变量是keyword、搜索框页面用search.html表示、结果展示页用result.html表示、css页面用style.css表示(或直接写在html内)、自动提示联想功能的js代码用autocomplete.js表示。 请分步按我的要求,自动生成配套且关联的app.py代码、search.html代码、results.html代码和搜索框自动联想提示功能的JS代码。 在搜索框中输入关键词,并点击“Search”按钮或按下Enter键来进行搜索。程序会在数据库表中查找符合条件的数据,如果查找到了符合条件的结果,则在网页上展示出来;否则,提示用户无法查找到符合条件的结果。当在搜索框输入字符时,JavaScript代码会向服务器发送请求,获取数据库中与输入字符匹配的数据,并在搜索框下方显示出来,但自动提示联想的字符串数量限定在10条以内。
app.py代码:
```python
from flask import Flask, render_template, request
import sqlite3
app = Flask(__name__)
# 连接数据库
conn = sqlite3.connect('entable.db')
c = conn.cursor()
# 主页,即搜索框页面
@app.route('/')
def search():
return render_template('search.html')
# 结果展示页
@app.route('/results', methods=['POST'])
def results():
keyword = request.form['keyword']
# 从数据库中查找符合条件的数据
c.execute("SELECT * FROM core WHERE EN LIKE ?", ('%' + keyword + '%',))
results = c.fetchall()
# 如果查找到了符合条件的结果,展示结果页面
if results:
return render_template('results.html', results=results)
# 否则,提示无法查找到结果
else:
return "No results found."
if __name__ == '__main__':
app.run(debug=True)
```
search.html代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='autocomplete.js') }}"></script>
</head>
<body>
<div class="container">
<h1>Search</h1>
<form action="/results" method="POST">
<input type="text" name="keyword" id="keyword" placeholder="Enter keyword...">
<input type="submit" value="Search">
</form>
<div id="suggestions"></div>
</div>
<script>
// 自动提示联想功能
autocomplete(document.getElementById("keyword"), "{{ url_for('autocomplete') }}");
</script>
</body>
</html>
```
results.html代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<h1>Results</h1>
<table>
<tr>
<th>ID</th>
<th>EN</th>
<th>CON</th>
</tr>
{% for result in results %}
<tr>
<td>{{ result[0] }}</td>
<td>{{ result[1] }}</td>
<td>{{ result[2] }}</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
```
autocomplete.js代码:
```javascript
function autocomplete(inp, url) {
var currentFocus;
inp.addEventListener("input", function(e) {
var val = this.value;
if (!val) {
return false;
}
closeAllLists();
currentFocus = -1;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
if (data.length > 0) {
var a, b;
for (var i = 0; i < data.length && i < 10; i++) {
a = document.createElement("div");
a.innerHTML = data[i];
a.addEventListener("click", function(e) {
inp.value = this.innerHTML;
closeAllLists();
});
document.getElementById("suggestions").appendChild(a);
}
}
}
};
xhr.open("GET", url + "?keyword=" + val, true);
xhr.send();
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById("suggestions");
if (x) {
x = x.getElementsByTagName("div");
}
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) {
x[currentFocus].click();
}
} else {
document.getElementById("search-form").submit();
}
}
});
function addActive(x) {
if (!x) {
return false;
}
removeActive(x);
if (currentFocus >= x.length) {
currentFocus = 0;
}
if (currentFocus < 0) {
currentFocus = (x.length - 1);
}
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}
```
注意事项:
1. app.py中的conn变量和c变量应该放在search()函数和results()函数内部,否则会出现连接池问题。
2. autocomplete.js中的请求url应该是url + "?keyword=" + val,而不是url + "&keyword=" + val。
阅读全文