Question

我正在尝试使每个迭代的trs'/ case对象可单击，将所选对象的case_id传递给Flask视图，如下所示。似乎JS的ID正在起作用，但我不确定是否不是Ajax？

<table class="table table-striped">
    {% for case in cases %}
        <tr method="POST" action="/current_case/">
            <td>{{ case.case_id }}</td>
            <td>{{ case.case_name}}</td>
            <td>{{ case.case_desc }}</td>
            <td>{{ case.case_date }}</td>
        <tr>
    {% endfor %}

</table>

烧瓶视图：

@app.route('/current_case/', methods=['GET', 'POST'])
def current_case():
    case = Case
    if request.method == 'POST':
        case_id = request.form['case_id']
        current_case = Case.query.filter_by(case_id=case_id).first_or_404()
        return render_template('welcome.html',
                               case=current_case)
    else:
        pass

JavaScript的：

<script type="text/javascript">
$(document).ready(function() {
$("#table tr").click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    var value=$(this).find('td:first').html();
});
    $('#table tr').on("dblclick",  function(e){
        var case_id = $("#table tr.selected td:first").html();
        var data = $(this).find("td:first").text();
        alert(case_id);
    });
    $.ajax({
        url: "{{ url_for('current_case') }}",
        data: {'case_id' : case_id},
        type: 'POST',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
});
</script>

任何想法，想法，指向正确方向的建议都表示赞赏：）

非常感谢

Answer 1

以下程序提供了一个表格。当用户双击表条目时，该页面向Flask发送一个AJAX请求，接收结果，并在当前页面上显示结果。请注意，为简单起见，我使用了Python list而不是数据库连接。

在Python 2.7.6，Flask 0.10.1，Ubuntu 14.04.4

上测试

from flask import Flask, render_template_string, request, jsonify, abort
import wikipedia
from collections import namedtuple

app = Flask(__name__)

index_html='''
<!DOCTYPE html>
<html lang="en">
<head><title>Wiki Lookup Example</title></head>
<body>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.table tr').on("dblclick",  function(e){
        var case_id = $(this).find("td:first").text();
        $.ajax({
            url: "{{ url_for('current_case') }}",
            data: {'case_id' : case_id},
            type: 'POST',
            success: function(response) {
                $("#result").html(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});
</script>

<table border="1" class="table table-striped">
    {% for case in cases %}
        <tr method="POST" action="/current_case/">
            <td>{{ case.case_id }}</td>
            <td>{{ case.case_name}}</td>
            <td>{{ case.case_desc }}</td>
            <td>{{ case.case_date }}</td>
        <tr>
    {% endfor %}

</table>

<hr />
<div id="result"></div>
</body></html>'''

# Just an HTML snippet, not a whole document.
welcome_html = '''
<p>Id: {{case.case_id}}</p>
<p>Desc: {{ case.case_desc }}</p>
'''

CaseType = namedtuple('CaseType', 'case_id case_name case_desc case_date')
case_db = [
    CaseType('0', 'Abc', 'Able Baker Charlie', 'Delta'),
    CaseType('1', 'Def', 'Delta Echo Foxtrot', 'Golf'),
]

@app.route('/')
def index():
    return render_template_string(index_html, cases=case_db)

@app.route('/current_case/', methods=['GET', 'POST'])
def current_case():
    if request.method == 'POST':
        case_id = request.form['case_id']
        #current_case = Case.query.filter_by(case_id=case_id).first_or_404()
        for current_case in case_db:
            if current_case.case_id == case_id:
                break
        else:
            abort(404)
        return render_template_string(welcome_html,
                               case=current_case)
    else:
        pass

app.run(debug=True)

如何使用Ajax将表中的数据发布到Flask视图？

1 个答案: