Question

提交包含数字列表的表单后，我需要从JSON文件中提取一个简单计算的结果，在该列表上执行并在<div></div>标记内输出结果，在当前页面。

下面是Flask Python代码，其中包含通过getlist获得的提交的数字列表。计算结果最终通过JSON转换为jsonify。

from flask import Flask,render_template, request, jsonify
app = Flask(__name__)

data = [
('t', 0, 'a'),
('t', 0, 'b'),
('t', 0, 'c'),
('t', 0, 'd')
]

@app.route('/', methods=['GET', 'POST'])
def index():
    entries=[]
    for (i,v) in enumerate(data):
        entries.append(data[i][2])
    return render_template('test.html', entries=entries)


@app.route('/_numbers', methods=['GET', 'POST'])
def numbers():
    a = request.form.getlist('a')
    print a
    L=0
    v=0
    an=0
    for L,v in enumerate(a):
        an+=float(v)
    return jsonify(res=an)

if __name__ == '__main__':
    app.debug = True
    app.run()

test.html文件如下所示：

{% extends "test0.html" %}
{% block body %}

<h2>Get the sum of 4 numbers</h2>
<form action="{{ url_for('numbers')}}" method=post>
    {% for L in entries %}

              <input type=float size=5 name=a>

              {% if loop.last==True %}             
                  <input class="btn btn-primary" type="submit" value="Calc" id="calculate"> 
                  </form>
              {% endif %}
    {% endfor %}

{% endblock %}

提交后，我会以JSON文件的形式获得正确的答案（例如）：

{
  "res": 10.0
}

如何提取获取的值并通过JQuery显示它？我试过getJSON但没有成功。谢谢你的帮助。

Answer 1

如果要在当前页面中插入结果，则必须通过Ajax提交表单，然后在完成回调中获得JSON响应。

查看jQuery的AjaxForm插件，它可以将HTML表单中的提交按钮转换为Ajax提交。以下是改编自插件文档的简短示例：

<script> 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function(response) { 
            var result = jQuery.parseJSON(response);
            $('#someDiv').innerHTML = result.res
        }); 
    }); 
</script>

提交表单并通过JQuery显示JSON文件中包含的结果

1 个答案: