将数据从数据库(mysql)打印到烧瓶中的表

时间:2019-08-22 16:38:58

标签: python jquery html ajax flask

有两个选择框,当用户单击“搜索”按钮时,服务器(也许是控制器?)从数据库中获取与两个选择框选中的选项匹配的数据。另外,服务器将在表中显示数据。 因此,我在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从数据库中获取了titlecategory1category2content。而且,结果看起来像这样:

[{'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(),

这部分不好。我不记得他说了什么,但我想他说:“当客户提出要求时,服务器必须照顾好一切。但是,此代码不是问题,因为客户端会发送该值。 所以我试图修复它,但未能从所选选项中获得价值。我如何知道除上述代码外用户选择的选项?

0 个答案:

没有答案