我正在尝试从网页获取数据到我的flask应用程序，并对其进行一些操作后，输出列表即试图将其作为下拉列表发送回前端。
到目前为止，我所做的是：
有一个用户表单，用户在其中输入详细信息并单击提交，然后获得json输出。
以这种形式，我有一个搜索按钮，当用户输入一个字符串时，该字符串将被发送到flask应用程序路由，并且只需执行很少的搜索操作并输出项目列表（直到这部分工作为止！）
我需要开始工作的是输出列表，应再次将其发送回表单页面，而我无法使其正常工作。
这是我到目前为止所做的：
var successFunction = function(response) { /* do something here */ $('#info').html(JSON.stringify(data, null, ' ')); }); } $(function(){ $('#btnSignUp').click(function(){ $.ajax({ url: '/signUp', data: $('form').serialize(), type: 'POST', success: successfunction(response) error: function(error){ console.log(error); } }); }); });
flask应用程序具有以下内容：
from flask import Flask, render_template, request,jsonify,url_for import json,os,re app = Flask(__name__) @app.route('/',methods=['GET','POST']) def form(): if request.method == 'POST': #this block is only entered when the form is submitted result = { key: value[0] if len(value) == 1 else value for key, value in request.form.iterlists() } return json.dumps(result,indent=2) return render_template('form_backup1.html') @app.route("/signUp", methods=["POST","GET"]) def signUp(): jsdata = request.form['Nitro'] <couple of find and search operations the output of which is in this dropdown_list list> return jsonify(dropdown_list) if __name__ == '__main__': app.run(host="0.0.0.0",port="5000",debug = True)
删除html页面只是为了显示搜索框：
<div id='nitroo'> Nitro_search: <input type="text" placeholder="Apply Nitro" name="Nitro" id="Nitro"> <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Search</button> <pre id="info"></pre>
就像我说的那样，当用户单击搜索时，我能够获得html表单中用户输入的文本。python的输出列表是我无法到达前端的地方。
任何帮助，将不胜感激。
谢谢
您可以将ajax与Jquery一起使用。您可以查看此文档以了解更多详细信息。
如何进行：
在您的HTML文件模板中：
最好先加载Jquery，再加载其他javascript文件。
静态地：
<script type=text/javascript src="{{url_for('static', filename='jquery.js') }}"> </script>
或使用Google的AJAX库API：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
<script type=text/javascript>$SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; </script>
此脚本标记将全局变量设置为应用程序根目录的前缀。
2. **在烧瓶的侧面**
编写一个函数，该函数将用户在表单中输入的值作为参数，执行搜索操作并返回带有要显示列表的JSON对象。
@app.route("/_signUp") def signUp(): myString = request.args.get('myString') """couple of find and search operations the output of which is in this dropdown_list list""" dropdown_list = ['A', 'B', 'C'] #sample return jsonify(dropdown_list=dropdown_list)
编写一个脚本，该脚本将检索输入的数据，将其以Ajax格式发送到服务器，并显示服务器返回的信息。
<script type=text/javascript> $(function(){ $('#btnSignUp').bind('click', function(){ $.getJSON($SCRIPT_ROOT + '/_signUp', { myString: $('input[name="Nitro"]').val(), },function(data){ $('#info').append('<li>' + data.dropdown_list[0] + '</li>' );//A $('#info').append('<li>' + data.dropdown_list[1] + '</li>' );//B $('#info').append('<li>' + data.dropdown_list[2] + '</li>' );//C } }); }); </script> <div id='nitroo'> Nitro_search: <input type="text" placeholder="Apply Nitro" name="Nitro" id="Nitro"> <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Search</button> <pre id="info"></pre> </div>
有关更多详细信息，请参见此链接。
