有两个选择框,当用户单击“搜索”按钮时,服务器(也许是控制器?)从数据库中获取与两个选择框选中的选项匹配的数据。另外,服务器将在表中显示数据。
因此,我在Google上搜索了此操作,发现人们使用append
将数据插入表中。但这不起作用,我终于知道jsonify不会返回列表...我该如何解决这个问题?
app.py
@app.route('/solution')
def solution():
# return render_template('solution.html')
return gijunController.getGijun()
# It is just bring data from mysql to select box in html
@app.route('/_update_gijun')
def update_gijun():
# print(data)
return gijunController.updateTrouble()
# hava a problem here..
@app.route('/_show_gijun_table')
def show_gijun_table():
return gijunController.showGijunTable()
gijunController.py
class GijunController():
def __init__(self):
pass
def getGijun(self):
upjong = counselingdao.getGijun()
return render_template('solution.html', result=upjong)
def updateTrouble(self):
pass
def showGijunTable(self):
selected_upjong = request.args.get('selected_class', type=str)
selected_trouble1 = request.args.get('selected_entry', type=str)
result = counselingdao.getStandardBigo(selected_upjong, selected_trouble1)
return jsonify(datas=result)
counselingdao.getStandardBigo
从数据库中获取了title
,category1
,category2
,content
。而且,结果看起来像这样:
[{'category_name': 'Korea', 'type_1': 'seoul',
'standard': 'capital', 'bigo': ''},
{'category_name': 'Korea', 'type_1': 'seoul',
'standard': 'history', 'bigo': ''},
{'category_name': 'Korea', 'type_1': 'sightseeing',
'standard': '', 'bigo': ''}]
(standard和bigo可以为null)
solution.html
<div class="row">
<div class="col-sm-12">
<form>
<div class="form-row">
<div class="form-group col-sm-3">
<label for="Upjong">Category</label>
<select class="form-control" id="Upjong" name="Upjong">
{% for row in result %}
<option value="{{ row.category_name }}">{{ row.category_name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-sm-3">
<label for="Trouble1">Trouble Type1</label>
<select class="form-control" id="Trouble1" name="Trouble1">
{% for row in Trouble1 %}
<option value="{{ row }}">{{ row }}</option>
{% endfor %}
</select>
</div>
<div style="margin-top:32px;">
<button type="submit" class="btn btn-outline-dark" id="show_gijun_table">search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col" id="show_gijuns">
{% include 'solution_table.html' %}
</div>
</div>
solution_table.html
{% if datas %}
<table id="gijuns" style="width:100%">
<thead>
<tr>
<th>Category</th>
<th>Trouble Type1</th>
<th>Gijun</th>
<th>Bigo</th>
</tr>
</thead>
<tbody>
{% for row in datas %}
<tr>
<td> {{ row.category_name }}</td>
<td> {{ row.type_1 }}</td>
<td> {{ row.standard }}</td>
<td> {{ row.bigo }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
js
$(document).ready(function () {
$('#Upjong').change(function () {
$.getJSON('/_update_gijun', {
selected_class: $('#Upjong').val()
}).success(function (data) {
$('#Trouble1').html(data.html_string_selected);
})
});
$('#show_gijun_table').bind('click', function () {
// solution 1
$.getJSON('/_show_gijun_table', {
selected_class: $('#Upjong').val(),
selected_entry: $('#Trouble1').val(),
}).success(function (data) {
datas = JSON.stringify(data['datas'])
console.log("This is the returned data: " + data);
var str='<tr>'
$.each(datas, function(i){
str += '<td>'+datas[i].category +'</td><td>'+ datas[i].type_1+'</td><td>'+datas[i].standard+'</td><td>'+datas[i].bigo+'</td>';
str += '</tr>';
});
$('#show_gijuns').append(str);
});
return false;
});
});
(+) 这是另一个问题,有人对我说,这段代码不是MVC模式。特别是他说
selected_class: $('#Upjong').val(),
selected_entry: $('#Trouble1').val(),
这部分不好。我不记得他说了什么,但我想他说:“当客户提出要求时,服务器必须照顾好一切。但是,此代码不是问题,因为客户端会发送该值。 所以我试图修复它,但未能从所选选项中获得价值。我如何知道除上述代码外用户选择的选项?