AJAX 没有返回烧瓶渲染模板，它发送数据但在渲染之前停止答案

【问题标题】：AJAX is not returning a flask render_template, It sends the data but stops just before rendering itAJAX 没有返回烧瓶渲染模板，它发送数据但在渲染之前停止
【发布时间】：2021-07-02 12:28:28
【问题描述】：

大家好，感谢您查看我的问题，我正在尝试使用 Flask 构建和应用程序以将 html、css 和 js 文件路径发送到烧瓶（在 open() 和 read() 文件内容之后）将它们发送到 html并在那里查看代码。

我正在使用 AJAX 将数据发布到此 url: "/getFiles" ;数据已成功发送并打印，但代码在返回前停止。

我尝试了 Axios，但得到了完全相同的结果。

我尝试将 contentType: "application/json" 更改为 contentType: "json" 但代码随后停止工作。

我尝试渲染到与 index.html 不同的另一个页面，但这也没有帮助。

我尝试只使用return "OK" , 200 返回，但即使这样也没有用。

我做了一个简化版的代码，让你专注于问题。

这是我的python代码：

from flask import *

app = Flask(__name__)

@app.route('/', methods=["GET"])
def homepage():
    return render_template('index.html')

@app.route('/getFiles', methods=['POST'])
def getFiles():
    data = request.get_json()
    print(data)
    htmlFile = data['html']
    cssFile = data['css']
    jsFile = data['js']
    return render_template('index.html', html=htmlFile, css=cssFile, js=jsFile)
    
if __name__ == '__main__':
    app.run("0.0.0.0", port=5500)

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
  </head>
  <body>
    <p>html files :</p>
    <p>{{ html }}</p>
    <p>css files :</p>
    <p>{{ css }}</p>
    <p>js files :</p>
    <p>{{ js }}</p>
    <button id="clickMe">Bring Data</button>
  </body>

  <script>
    $("#clickMe").on("click", function () {
      $.ajax({
        url: "/getFiles",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
          html: "html files",
          css: "css_files",
          js: "js files ",
        }),
      })
        .done(function (result) {
          console.log("message sent!");
          $("#data").html(result);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
          console.log("failed to send! ");
        });
    });
  </script>
</html>

当我运行我的代码时，这就是我在 Python 日志中得到的结果

C:\Users\z420\Desktop\small test>python views.py
 * Serving Flask app 'views' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://192.168.147.110:5500/ (Press CTRL+C to quit)
127.0.0.1 - - [02/Jul/2021 15:44:50] "GET / HTTP/1.1" 200 -
{'html': 'html files', 'css': 'css_files', 'js': 'js files '}
127.0.0.1 - - [02/Jul/2021 15:44:51] "POST /getFiles HTTP/1.1" 200 -

数据已打印但没有渲染...

【问题讨论】：

代码如何停止返回，是否有错误。请在此处粘贴 python 日志。请给出您所面临的确切问题。
* 环境：生产警告：这是一个开发服务器。不要在生产部署中使用它。请改用生产 WSGI 服务器。 * 调试模式：关闭 * 在所有地址上运行。警告：这是一个开发服务器。不要在生产部署中使用它。 * 在192.168.147.110:5500 上运行（按 CTRL+C 退出）127.0.0.1 - - [02/Jul/2021 15:42:37] "GET / HTTP/1.1" 200 - {'html': 'html files', 'css'：'css_files'，'js'：'js 文件'} 127.0.0.1 - - [02/Jul/2021 15:42:39] “POST /getFiles HTTP/1.1”200 -
如您在上面看到的，我的数据正在打印，但 return render_template('index.html', html=htmlFile, css=cssFile, js=jsFile) 没有被启动
请edit您的问题包含日志以便于阅读。
完成，谢谢提醒

标签： javascript python flask

【解决方案1】：

如果你想显示文件名。您必须在 python dict 中返回文件名。并使用 javascript 在网页上显示它们。

[...]
return {"html":htmlFile,"css":cssFile,"js":jsFile}

将p标签替换为带有id文件 <div id="files"></div>的div

在js(jquery)中：

.done(function (result) {
      console.log("message sent!");
      console.log(result)
      $("#files").html(`<p>html files :</p><p>${result.html}</p><p>css files :</p><p>${result.css}</p><p>js files :</p><p>${result.js}</p>`)})

这将编辑并显示您想要的内容。

【讨论】：