从html中获取数据并<对其进行一些操作>并使用ajax或js将数据传回前端

IT技术 javascript python ajax flask
2021-03-07 10:20:34

我试图将数据从网页获取到我的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的输出列表是我无法进入前端的地方。

对此的任何帮助将不胜感激。

谢谢

1个回答

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

如何进行:

  1. 配置js脚本

在您的 HTML 文件模板中:

  • 加载 Jquery

最好在任何其他 javascript 文件之前加载 Jquery。

要么静态:

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

    此脚本标记将全局变量设置为应用程序根的前缀。

    1. 在 Flask 的一侧

编写一个函数,该函数将用户在表单中输入的值作为参数,执行搜索操作并返回一个带有您要显示的列表的 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" class="btn btn-lg btn-primary btn-block" type="button">Search</button>
   <pre id="info"></pre>
</div>

有关更多详细信息,请参阅此链接

$.getJSON($SCRIPT_ROOT + '/_signUp', { myString: $('input[name="Nitro"]').val(), },function(data){ $.each(data.dropdown_list,function(index,value) { $('#sel').remove(); $('#sel').append('<option value="' + value + '">' + value + '</option>'); }); }); @Tobin 当我点击搜索按钮时,下拉列表被删除,新的没有被添加
2021-04-26 10:20:34
你的代码应该是这样的:$.getJSON($SCRIPT_ROOT + '/_signUp', { myString: $('input[name="Nitro"]').val(), },function(data){ $('#sel option').remove(); $.each(data.dropdown_list,function(index,value) { $('#sel').append('<option value="' + value + '">' + value + '</option>'); }); }); ...假设 id #sel 指的是一个 div 标签(或其他),其中包含一系列<option>标签,我选择所有的<option>标签,我删除它们并且只然后我在我的目标标签中添加其他标签(带有 id #sel)。我希望它足够清楚!
2021-04-26 10:20:34
它不起作用,因为添加列表时目标标签#sel不再存在。必须考虑代码的结构(请看我之前的评论)……假设您有一个<ul id='sel'>标签,后跟一系列<li>标签。你要删除的不是所有的<ul>标签,而是<li>标签。然后在<ul>标签内添加带有新<li>标签的新列表在这种情况下,在您的 jquery 代码中,您将选择所有<li>标签,删除它们并在作为目标的<ul id='sel'>标签中添加新的<li>标签
2021-04-28 10:20:34
谢谢!!!!这正是我所需要的出色工作,我将列表添加到下拉列表中。再多一个查询,每次我点击表单中的“搜索”按钮时,它都会输出一个项目的下拉列表,下次我尝试不同的搜索时,下拉列表会附加上一个和新项目。任何想法仅让下拉列表包含基于给定的上次搜索的最新项目
2021-05-05 10:20:34
@CarmelJacob 您可以使用 jquery .remove()函数(删除<pre id="info">标记中<li>标记下的所有元素),然后添加新的搜索结果。试试这个: ... jQuery 还提供了许多用于操作页面上的元素和内容的功能,从简单地替换 HTML 到从页面中完全删除标签和内容。查看jquery 函数列表以获取更多信息。$('#info li').remove( ); $('#info').append('<li>' + data.dropdown_list[0] + '</li>' );//A
2021-05-19 10:20:34