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

提交包含数字列表的表单后，我需要（从

JSON

文件中）提取对该列表执行的简单计算结果，并在当前页面的

标记内输出该结果

下面是通过

getlist

获得的提交的数字列表的代码。计算结果最终通过

jsonify

转换为

JSON

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 %}

---

如何提取获得的值并通过JQuery显示？我尝试了

getJSON

，但没有成功。谢谢您的帮助。

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

看看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>

$（文档）.ready（函数（）{
//绑定“myForm”并提供一个简单的回调函数
$（'#myForm'）.ajaxForm（函数（响应）{
var result=jQuery.parseJSON（响应）；
$（'#someDiv'）。innerHTML=result.res
}); 
}); 

谢谢您的回复。尝试了您的解决方案后，我在FireBug上遇到以下错误：

TypeError:result为null$（“#result”）.innerHTML=result.res

响应的值是多少？这应该是您从Flask view函数返回的结果。这是我得到的：

response=Object{res=10}

太好了！它已转换为对象。然后你只需要做

$（'#someDiv'）。innerHTML=response.res

，就不需要parseJSON行了。这是一个进步，我不再有错误了，谢谢。但是，我的

div

保持为空：无法在我的当前页面上显示结果。

<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>