使用 jQuery 加載 html 文件與 flask 一起交付時加載（）不起作用

Question

我在 StackOverflow 上看到過類似的線程，但它似乎不起作用。 我正在構建一個簡單的 web 應用程序，用戶在其中上傳 docx 文件，並且 python 腳本進行一些處理並返回 mp3 文件供用戶下載。

我的腳本還生成了一堆 HTML 文件（文檔的內容），我想在我的網頁上顯示這些文件，例如將 text1.html 加載到 index.html 中。 但是我遇到了兩個問題：

文本（text1.html）僅在我直接打開頁面（index.html）HTML 文件時出現，當我使用 Z319C3206A7F10C17C3B9116D4A957646 加載 web 應用程序時不顯示
text1.html 僅在靜態/模板文件夾中出現。

索引.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>

和文本1.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加載后生成，有沒有更好的方法來加載這些文件？ 正如我假設 static 文件夾中的內容應該是 static。

Answer 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")

使用 jQuery 加載 html 文件與 flask 一起交付時加載（）不起作用

問題描述

1 個解決方案

解決方案1
-1 2021-06-10 06:36:25

使用 jQuery 加載 html 文件 與 flask 一起交付時加載（）不起作用

問題描述

1 個解決方案

解決方案1 -1 2021-06-10 06:36:25

使用 jQuery 加載 html 文件與 flask 一起交付時加載（）不起作用

解決方案1
-1 2021-06-10 06:36:25