从html获取数据并使用ajax或js将数据传递回前端

从html获取数据 并使用ajax或js将数据传递回前端

您可以将ajax与Jquery一起使用。您可以查看此文档以了解更多详细信息。

如何进行：

1. 配置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)

1. 返回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>

有关更多详细信息，请参见此链接。