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

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 响应。

看看AjaxForm jQuery 插件，它可以将 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>