使用烧瓶交付时，使用 jQuery load() 加载 html 文件不起作用答案

【问题标题】：loading html files with jQuery load() not working when delivered with flask使用烧瓶交付时，使用 jQuery load() 加载 html 文件不起作用
【发布时间】：2021-06-10 06:09:32
【问题描述】：

我在 StackOverflow 上看到过类似的线程，但它似乎不起作用。我正在构建一个简单的 webapp，用户上传 docx 文件，python 脚本进行一些处理并返回 mp3 文件供用户下载。

我的脚本还生成了一堆我想在我的网页上显示的 HTML 文件（文档的内容），例如将 text1.html 加载到 index.html 中。但是我遇到了两个问题：

文本 (text1.html) 仅在我直接打开页面 (index.html) HTML 文件时出现，而在我使用烧瓶加载 Web 应用程序时不显示
text1.html 仅在静态/模板文件夹中出现。

index.html:

<html>
<head>
  <script
          src="https://code.jquery.com/jquery-3.6.0.js"
          integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
          crossorigin="anonymous"></script>
  <script>
    $(document).ready(function(){
      $("#includedContent").load("text1.html");
    });
    </script>
</head>



<body>
<h3>Heading</h3>
<form method=post enctype=multipart/form-data id="form1">
  <input type=file name=uploadfield1>
<!--  <input id="ub" name=uploadbutton1 type=submit value=Upload >-->
  <button type="submit" name="uploadbutton1" value=Upload>Upload </button>
  <button type="button" name="removebutton" value="Remove">Remove </button>

</form>

<form method ="post" enctype=multipart/form-data >
  <button type="submit" name="tag1"  value="tag2">Process</button>

</form>


<p>
  text selected:
</p>

<div id="includedContent"></div>

</body>


</html>

和 text1.html

<p> sample text from text1.html that is in projectfolder/templates folder </p>

我尝试将$("#includedContent").load("text1.html"); 更改为$("#includedContent").load("/Users/user/PycharmProjects/project/static/text1.html");，但效果不佳..

那么加载外部 HTML 文件的正确方法是什么？此外，由于我要加载的文件将在加载index.html 之后生成，有没有更好的方法来加载这些文件？因为我假设静态文件夹中的东西应该是静态的。

【问题讨论】：

检查这个并检查你的链接，你的路径对 text1.html 是否正确？ api.jquery.com/load

标签： javascript html jquery flask

【解决方案1】：

你可以使用ajax，它不会重新加载页面并且可以得到响应。

$.ajax({
type: "GET",// method
url: `${window.location.pathname}`, // route
data: {
  "key":"value" // json format in key value pair
},
contentType: "application/json;charset=UTF-8",
success: function (res) {
  console.log(res); // contents of text1.html
   }
});

你可以使用request.form.get("key") # key for the value然后返回text1.html

return render_template("text1.html")

【讨论】：

.load 是它自己的ajax调用，你不需要这个。 api.jquery.com/load