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

Posted

技术标签:

【中文标题】从 html 中获取数据并<对其进行一些操作> 并使用 ajax 或 js 将数据传回前端【英文标题】:Get data from html and <do some operation on it> and pass the data back to the front end using ajax or js 【发布时间】:2019-03-23 00:52:26 【问题描述】:

我正在尝试将数据从网页获取到我的烧瓶应用程序,并在对其进行一些操作后,输出列表试图将其作为下拉列表发送回前端。

到目前为止我做了什么:

有一个用户表单,用户在其中输入详细信息并单击提交,他会得到一个 json 输出。

在这种形式中,我有一个搜索按钮,当用户输入一个字符串时,该字符串被发送到烧瓶应用程序路径,并且完成了一些搜索操作并输出一个项目列表(直到这部分它正在工作!)

我需要开始工作的是应该再次将输出列表发送回表单页面,但我无法让它工作。

这是我到目前为止所做的:

    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 的输出列表是我无法到达前端的地方。

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

谢谢

【问题讨论】:

遇到麻烦究竟意味着什么?你有错误或错误?你不知道写什么代码?目前尚不清楚问题是什么。 python输出正确的数据吗?它不是以您想要的方式呈现吗?请具体说明您的问题。谢谢 Python 正在正确输出列表。我无法将列表获取到前端网页。当我单击“搜索”按钮时网页显示为空白。 您的浏览器控制台有任何错误吗?顺便说一句,var successFunction = function(response) /* do something here */ $('#info').html(JSON.stringify(data, null, ' ')); );...未定义名为 data 的变量。也许您打算改用response,因为这是您为包含服务器提供的数据的变量指定的名称 浏览器控制台显示了我需要的列表。但我没有在浏览器本身上看到它。我的方法正确吗?使用 Ajax 从 Python 脚本中获取信息? 这就是我的意思,我认为您应该将代码更改为$('#info').html(JSON.stringify(response, null, ' '));。你的方法很好(至少在 javascript 方面,我不知道任何 python,但我相信你的话它正在工作......),我只是认为你从错误的变量中读取。 【参考方案1】:

您可以在 Jquery 中使用 ajax。您可以查看this doc了解更多详情。

如何进行:

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

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

    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)
    返回 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>

更多详情请见this link。

【讨论】:

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

以上是关于从 html 中获取数据并<对其进行一些操作> 并使用 ajax 或 js 将数据传回前端的主要内容,如果未能解决你的问题,请参考以下文章

从 HTML5 视频中获取原始像素数据

获取xml节点的值并使用as3对其进行操作

php 从表中的多个列获取数据作为数组并对其进行操作

如何从数据库中获取所有表名并对其进行分页

从输入表单中获取 Base64 编码文件数据

打印 JSON 字符串并使用 HTML 和 CSS 对其进行格式化