Flask结合JQuery的$.get()方法无法在HTML页面输出数据求助

我来帮你排查一下问题，主要是两个核心环节出了差错：后端返回数据的方式不符合需求，前端处理内容的方法也没选对。

问题根源拆解 #

1. Flask端的误区：你用jsonify()返回HTML字符串，但jsonify()的核心作用是把数据序列化成JSON格式，这会导致后端返回的其实是带引号的JSON字符串（比如"<h1>Hello Flask !!!</h1>"），同时响应头的Content-Type被设为application/json，并不是我们需要的HTML类型。
2. 前端jQuery的问题：你用了.text(data)来设置内容，这个方法会把所有传入的内容当成纯文本展示，不会解析HTML标签——哪怕后端返回了正确的HTML，用text()也只会显示<h1>Hello Flask !!!</h1>这个字符串，而不是渲染成标题样式。

修复方案（两种可选） #

方案1：直接返回HTML字符串（最简洁）

修改Flask代码，去掉jsonify()，直接返回HTML片段，Flask会自动帮我们设置正确的text/html响应头：

from flask import Flask
app = Flask(__name__)

@app.route('/', methods=["GET"])
@app.route('/hello', methods=["GET"])
def hello():
    # 直接返回HTML内容，无需jsonify处理
    return '<h1>Hello Flask !!!</h1>'

然后修改前端的jQuery代码，把.text(data)改成.html(data)，这样才能解析并渲染HTML标签：

$(document).ready(function() {
    $("#btnGet").click(function() {
        $.get('http://localhost:5000/hello', function(data) {
            // 使用html()方法解析并渲染HTML内容
            $("#getInfo").html(data);
        });
    });
});

方案2：用JSON传递HTML（适合多数据场景）

如果你的业务需要同时返回多组数据（比如标题、副标题、内容等），可以用jsonify()返回一个包含HTML字段的JSON对象：

from flask import jsonify, Flask
app = Flask(__name__)

@app.route('/', methods=["GET"])
@app.route('/hello', methods=["GET"])
def hello():
    # 返回包含HTML字段的JSON对象
    return jsonify(html_content='<h1>Hello Flask !!!</h1>')

对应的前端代码需要先取出JSON对象里的目标字段，再用.html()渲染：

$(document).ready(function() {
    $("#btnGet").click(function() {
        $.get('http://localhost:5000/hello', function(data) {
            // 取出JSON中的html_content字段并渲染
            $("#getInfo").html(data.html_content);
        });
    });
});

额外排查小技巧 #

• 打开浏览器的开发者工具（F12），切换到Network面板，点击按钮后查看请求的响应内容，能快速确认后端返回的是不是你预期的数据。
• 如果你的HTML是直接用本地文件打开（file://协议），可能会遇到跨域限制。建议把HTML放到Flask的templates文件夹里，新增一个路由返回模板：

  from flask import render_template
  
  @app.route('/page')
  def show_page():
      return render_template('index.html')
  

  然后访问http://localhost:5000/page再测试，就能避免跨域问题了。

内容的提问来源于stack exchange，提问作者user1304846