将字符串从 Python 传递到 Flask 模板答案

【问题标题】：Pass String from Python to Flask template将字符串从 Python 传递到 Flask 模板
【发布时间】：2018-04-09 16:08:16
【问题描述】：

我有一个大学作业，我需要创建一个小型聊天网站。我使用 Python 作为后端代码，使用 Flask 作为框架。基本上，我想从前端获取用户输入，使用我开发的 Python 代码运行它，然后将其作为答案发回。最简单的方法是如何做到这一点？我读过很多关于 jQuery 和 AJAX 的文章，但我对 JS 很不擅长。有什么建议吗？

我需要的是，在处理完这个字符串之后，将处理过的任何内容发送到站点。我试图关注这个帖子How do I send data from JS to Python with Flask?，它适用于我的 POST，但不适用于我的 GET。它总是以未定义的形式返回。我尝试更改为 dict，尝试拨打不同的电话，但我找不到适合我实际需要的内容。谢谢！

编辑！： 在尝试了@arsho 的代码后，我有点迷路了。它有效，我看到了它是如何实现的，但不能完全使它与我所拥有的一起工作。这是我想出的：

test
https://pastebin.com/4i2hDRSJ

对不起，如果我不是很清楚。为了便于理解，我翻译了变量名。

Pastebin 和我朋友制作的 html：

test
https://pastebin.com/m7FQCgAm

Scripts.js：

test
https://pastebin.com/pM1L77p7

再次感谢。

【问题讨论】：

欢迎来到 Stackoverflow！分享您的代码； python代码和模板代码。
@arsho 抱歉，这里有点新东西 :)

标签： javascript python ajax flask

【解决方案1】：

我正在为您的项目抢先一步。我给出了一个使用 Flask 的简单 AJAX 搜索示例。

application.py 包含：

from flask import Flask, render_template, request, url_for, redirect
app = Flask(__name__)

@app.route('/show_search_result', methods=['GET','POST'])
def show_search_result():
    if request.method == "POST":
        word = request.form.get("word")
        word_lower = word.lower()
        data = {
            "name" : "Ahmedur Rahman Shovon",
            "country": "Bangladesh",
            "gender": "Male"
        }
        if word_lower in data:
            value = data[word_lower]
            return value
        else:
            return "No data found"
    else:
        return redirect(url_for('show_index'))

@app.route('/')
@app.route('/index')
def show_index():
    return render_template("ajax.html")

if __name__ == '__main__':
    app.run(debug=True)

在ajax.html 中，我们调用如下的ajax 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Ahmedur Rahman Shovon">
    <title>Ajax Example</title>
    <link href="https://fonts.googleapis.com/css?family=Exo+2:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card bg-light mb-3 content">
                <h5 class="card-header">
                    <i class="fa fa-globe"></i>
                    Search Developer's Information (e.g.: name, country, gender etc.)
                </h5>
                <div class="card-body message_area" id="message_area">
                </div>
                <div class="card-footer">
                    <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-book"></i>
                            </span>
                        <input type="text" class="form-control" id="search_word_text"
                               placeholder="Search a word and press enter"/>
                        <span class="input-group-btn">
                                <button class="btn btn-dark" id="search_btn" type="button">
                                <i class="fa fa-search"></i> Search
                                </button>
                            </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
    function create_message_div($original_word, $ajax_data){
        $html_data = "<div><p><b>Search Term: </b><i>"+$original_word+"</i></p>";
        $html_data += "<p><b>Result: </b><i>"+$ajax_data+"</i></p>";    
        $html_data += "<hr/></div>";
        return $html_data;
    }

    function search_word(){
        $search_word_value = $("#search_word_text").val();
        $("#search_word_text").val("");
        $.ajax({
            url: '{{ url_for("show_search_result") }}',
            data: {
                "word" : $search_word_value,
            },
            type: 'POST',
            success: function(response) {
                $new_div = create_message_div($search_word_value, response);
                $("#message_area").prepend($new_div);
            },
            error: function(error) {
                console.log("Error");
            }
        });             
    }

    $("#search_btn").on("click", function () {
        search_word();
    });
    $('#search_word_text').on('keypress', function (e) {
        if(e.which === 13){
            search_word();
        }
    });
})

</script>

</body>
</html>

输出：

N.B.：我已经发布了完整的工作代码来展示 AJAX 如何与 Flask 一起工作的完整视图。根据您的要求进行修改。

【讨论】：

非常感谢！我现在无法检查它，但我会尽快将其投入使用，看看它如何适合我的项目。谢谢！
它没有像我预期的那样工作:( 我将编辑主帖。
flask Jinja 2 标签在外部 JS 中不起作用。尝试将url: '{{ url_for("show_search_result") }}', 更新为url: '/show_search_result',
我发现了多个错误，并且无法在没有所有文件和/或在 pastebin 中调试这些错误。创建一个 github 存储库，上传您的代码，然后我们可以调试它们。或者您可以尝试修改我的代码，因为它工作正常。
经过大量研究后，我修复了脚本中的一些错误，成功后，我可以提醒我的结果:)。现在，我必须解决“未定义”返回问题，我可能需要回调函数之类的东西。我正在阅读这个帖子：stackoverflow.com/questions/4580265/… 希望它会成功