您可以将ajax与Jquery一起使用。您可以查看此文档以了解更多详细信息。
如何进行：
- 配置js脚本
在您的HTML文件模板中：
- 加载jQuery ：
最好先加载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)- 返回HTML代码
编写一个脚本，该脚本将检索输入的数据，将其以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" type="button">Search</button> <pre id="info"></pre></div>有关更多详细信息，请参见此链接。
