Javascript 在Python中使用ajax使用XMLHttpRequest（）打开文本文件_Javascript_Python_Ajax_Flask_Xmlhttprequest

Javascript 在Python中使用ajax使用XMLHttpRequest（）打开文本文件

javascript python ajax flask

Javascript 在Python中使用ajax使用XMLHttpRequest（）打开文本文件,javascript,python,ajax,flask,xmlhttprequest,Javascript,Python,Ajax,Flask,Xmlhttprequest,我正试图用Python在Flask中使用W3school提供的一个非常简单的ajax示例。该示例仅在按下按钮时将名为ajax_info.txt的文件中的一些数据加载到页面。我的桌面程序具有下一个简化结构： FlaskProject app.py -uploads ajax_info.txt -templates html templates 我已经将ajax_info.txt文件与下一个代码一起上传到服务器 def uploader_func():

我正试图用Python在Flask中使用W3school提供的一个非常简单的ajax示例。该示例仅在按下按钮时将名为ajax_info.txt的文件中的一些数据加载到页面。我的桌面程序具有下一个简化结构：

FlaskProject
   app.py
   -uploads
      ajax_info.txt
   -templates
      html templates

我已经将ajax_info.txt文件与下一个代码一起上传到服务器

def uploader_func():
   
   if request.method == 'POST':
      f = request.files['file']
      file_path = os.path.join(app_config[UPLOAD_FOLDER], secure_filename(f.filename))
    
      f.save(file_path)
      #print(current_app.root_path)
      #print(os.path.isfile(os.path.join(app_config.UPLOAD_FOLDER, secure_filename(f.filename))))
      return 'file uploaded successfully'

这个函数成功地上传了文件并显示了本地上传的位置，我也可以在上传文件夹中看到它。现在我必须用下一个脚本打开它：

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    console.log("hi");
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
      
    }
  };
  xhttp.open("GET", "uploads/ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>


XMLHttpRequest对象
让AJAX更改此文本
更改内容
函数loadDoc（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
控制台日志（“hi”）；
if（this.readyState==4&&this.status==200）{
document.getElementById（“demo”）.innerHTML=this.responseText；
}
};
open（“GET”，“uploads/ajax_info.txt”，true）；
xhttp.send（）；
}

我在xhttp.open（）函数中尝试了所有可能的URL组合来访问该文件，但没有一个有效。我得到错误net:：ERR\u中止404（未找到）

我试过：

类似URL的组合，并具有完整路径
我用这个文件的路径打印了os.path.isfile（），并检查它是否存在
在xamp服务器上尝试了相同的代码，效果非常好

我对如何访问此文件感到困惑。您可以创建一个

静态

文件夹，并将

上传

文件夹放入其中，我们将不胜感激

静态文件夹（可选[str]）–包含静态文件的文件夹，以静态url路径提供服务。相对于应用程序根路径或绝对路径。默认为“静态”

然后可以在Javascript代码中执行此操作：

xhttp.open("GET", "static/uploads/ajax_info.txt", true);