如何在不刷新页面的情况下将 python 输出发送回 html？

Question

所以我试图制作一个代码编辑器并处理来自用户输入的代码，就像大多数竞争性编码网站的工作方式一样。我会展示相关部分。

我在 python 上使用了 codemirror 和 Flask，在页面中创建了一个代码编辑器，使用 js 从按钮 onclick 获取用户输入并使用 ajax 将代码发送回我的 python 脚本，并说我处理了我的数据并生成了输出，现在我坚持尝试将数据发送回 html 页面（可能就像在另一个代码块中显示输出到用户）

html 代码块的代码以及我尝试发回数据的尝试： py-tut.html

        <div class="codeblock">
            <p>Python editor</p>
            <code><textarea type="text" class="code" id="code" spellcheck="false"></textarea></code>
            <script>
                var codebox = CodeMirror.fromTextArea(document.getElementById("code"), {
                    mode: "python",
                    theme: 'dracula',
                    indentUnit: 4,
                    lineNumbers: 1
                });
                {#set any values in the text box#}
                codebox.getDoc().setValue("import random")
            </script>
            <div class="console" id="console"></div>
            <button type="submit" class="submit" onclick="submit()">Submit</button>
            <script>
                function submit() {
                    var c = codebox.getValue()
                    $.post('http://127.0.0.1:8000/get_code/', {c}, function(){
                        {#this is the part where Im stuck at#}
                        document.getElementById("console").innerHTML = {{ code }};
                    })
                }
            </script>
        </div>

下面是 Flask 部分的代码： website.py

@app.route("/get_code/", methods=["GET", "POST"])
def get_code():
    if request.method == "POST":
        code = request.form.getlist('c')[0]
        print(code)
        return render_template("py-tut.html", code = "code")

网站的实际外观如下：

主要问题是我无法在处理后将数据发送回 html，我尝试了 render_template、url_for、重定向，但每次我点击提交按钮，没有任何反应。请帮忙

Answer 1

这是一个未经测试的简短版本。它依赖于 JQuery 库。

可以从 onclick 事件触发页面的以下脚本部分。它运行 fetch request. It should pick up your user-inputted code, or whatever you wish to transmit to the back-end. It is POST data, so content will be contained within the request (as JSON using stringify).

<script>
  let api_submit = function() {
    fetch('{{ url_for('get_code') }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
      body: JSON.stringify($('.code').html())
    })
    .then( response => response.json() )
    .then( function (result) {
      $('.console').html(result.code);
    });
  };
</script>

这是处理 POSTed 数据的后端路由。内容需要从JSON转换而来。 flask render_template 使用 Jinja 构建响应，然后将此响应数据以 python dict 的形式发送回客户端（一个名为 'code' 的 dict 元素）。方便的是，在 flask 中，在服务器对 POST 请求的响应中，字典会自动转换为 JSON。

@app.route("/get_code/", methods=["GET", "POST"])
def get_code():
  if request.method == "POST":
    post_data = request.get_json()
    code = post_data.get('code')
    return dict(code=render_template("py-tut.html", code=code))
  # you may need to cater for 'GET' accesses from somewhere

看看是否可行。

如何在不刷新页面的情况下将 python 输出发送回 html？

How to send python output back to html without refreshing the page?

html

javascript

python

flask

codemirror