JS Python与状态为0的ajax和flask交互答案

【问题标题】：JS Python interaction with ajax and flask having status 0JS Python与状态为0的ajax和flask交互
【发布时间】：2021-07-22 18:28:02
【问题描述】：

我有一个JS点击功能，想把一些数据发送到python文件中处理。

在 JS 文件中：

$(#button).click(function(){
  // did some data collection
  $.ajax{
    type: "POST",
    url: "/dummy",
    data: {num: 123},
    success: function(result){
      alert(result);
    }
    error: function(xhr, status, error){
      alert(xhr.status)
    }
  }
})

并在导入后的python文件中：

app = Flask(__name__)
@app.route('/dummy', methods=['GET', 'POST'])
def dummy(){
  return 1
}
if __name__ == '__main__':
    app.run(debug=True)

单击按钮时，我一直收到警报 0。

为什么ajax请求不通过，状态为0？

【问题讨论】：

标签： javascript python ajax flask

【解决方案1】：

尝试将 Python 文件中的 0 转换为字符串。 Flask 通常不允许你返回整数。

app = Flask(__name__)
@app.route('/dummy', methods=['GET', 'POST'])
def dummy(){
  return "1"
}
if __name__ == '__main__':
    app.run(debug=True)

如果需要，您可以在 JavaScript 中使用 parseInt() 函数将字符串转换为整数。

$(#button).click(function(){
  // did some data collection
  $.ajax{
    type: "POST",
    url: "/dummy",
    data: {num: 123},
    success: function(result){
      result = parseInt(result);
      alert(result);
    }
    error: function(xhr, status, error){
      alert(xhr.status)
    }
  }
})

【讨论】：

感谢您的回复。但是，python 不应该返回“0”。 0 是 ajax 调用的错误
我认为ajax调用有错误，因为flask服务器正在返回一个整数，这是flask不允许的。这会导致服务器发回 HTTP 错误 500，ajax 将其解释为错误。
我检查了错误并得到：CORS 策略已阻止从源“null”访问“file:///C:/dummy”处的 XMLHttpRequest：仅支持跨源请求协议方案：http、data、chrome-extension、edge、https、chrome-untrusted
@TsangTszHin 哦！那是因为您需要允许使用 CORS 的来源。 CORS 用于防止人们从其他网站窃取内容。你可以用烧瓶做这个。这篇文章展示了如何做到这一点：stackoverflow.com/a/26395623/16450641
@BrendanR。这不是问题，他没有运行服务器，或者他仍然请求 ./dummy.py。不需要烧瓶-cors

【解决方案2】：

对于要向其发送数据而不是文件名的特定函数，您必须使用您在 python 文件中提到的路由。

在你的情况下应该是：

url: "/dummy",

应该是路由中的方法而不是方法

app.route("/dummy",methods=["GET","POST"])

编辑：返回一个字符串而不是一个整数，因为烧瓶不支持返回整数。

def dummy(){
  return "1"
}

【讨论】：

谢谢，我编辑了状态还是0，ajax还是有错误
我认为错误是您返回的是烧瓶中不允许的整数，而是返回字符串"1"
我把它改成了一个字符串但是alert(xhr.status)在点击按钮时仍然弹出消息0
python 终端是否有错误，您可以尝试在javascript中记录错误以查看错误。
我得到：从源“null”访问“file:///C:/dummy”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http，数据、chrome-extension、edge、https、chrome-untrusted。

【解决方案3】：

看来问题实际上出在 CORS 上。 CORS 通过阻止不同来源的请求来阻止网站窃取其他网站的内容。由于您的 HTML 文件正在使用 file:// URL 加载到 Web 浏览器中，因此 CORS 阻止了请求，有两种方法可以解决此问题。

选项 1： 使用 Flask Cors
更新 python 代码以允许跨源请求。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
corsApp = CORS(app, send_wildcard=True)

@app.route('/dummy', methods=['GET', 'POST'])
@cross_origin()
def dummy():
  return "1"

if __name__ == '__main__':
    app.run(debug=True)

选项 2： 在本地 Web 服务器上托管 HTML 文件

您还可以在本地 Web 服务器上托管 HTML 文件，然后使用该 URL 访问它。

from flask import Flask, render_template

app = Flask(__name__, template_folder="PATH_TO_HTML_FILE")

@app.route("/")
def home():
    return render_template("NAME_OF_HTML_FILE.html")

@app.route('/dummy', methods=['GET', 'POST'])
def dummy():
  return "1"

if __name__ == '__main__':
    app.run(host="0.0.0.0", port="5000", debug=True)

然后您可以使用0.0.0.0:5000/ 访问它（可能会根据正在运行的主机/端口烧瓶而改变）

另外，Flask 不能返回整数，只能返回字符串。

【讨论】：