Question

我有一份大学作业，我需要创建一个小型聊天网站。我使用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

很抱歉，如果我不是很清楚。我翻译了变量名称以便于理解。

使用html我的朋友的Pastebin让我：

test https://pastebin.com/m7FQCgAm

scripts.js中：

test https://pastebin.com/pM1L77p7

再次感谢。

Answer 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协同工作。根据您的要求进行修改。

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

1 个答案: