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

Question

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

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

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>