点击HTML按钮运行Python绘图脚本失败及jQuery安装疑问

核心问题原因 #

你的代码无法运行Python脚本的关键在于：直接通过AJAX请求Python文件只会下载该文件，不会执行它。浏览器端JavaScript没有权限直接执行本地Python脚本，必须通过后端服务触发执行。

具体错误点：

• AJAX请求逻辑错误：当前AJAX仅请求Create_Chart.py的文件内容，浏览器将其视为普通文本处理，完全没有执行生成图表的Python代码，自然不会生成图表。
• 路径潜在风险：Python脚本使用绝对路径保存图表，即使脚本能运行，后续HTML也可能因权限或跨域问题无法访问该本地文件，建议改用相对路径。

修复方案 #

要实现点击按钮运行Python脚本并展示图表，需搭建简单后端服务（以Flask为例）：

1. 安装Flask #

执行终端命令：

pip install flask

2. 创建Flask后端文件（app.py） #

将生成图表的逻辑封装为接口，和原文件同目录：

from flask import Flask, render_template
import numpy as np
import matplotlib.pyplot as plt
import os

app = Flask(__name__)

# 创建静态资源目录（用于存储图表）
if not os.path.exists('static'):
    os.makedirs('static')

# 返回HTML页面
@app.route('/')
def index():
    return render_template('index.html')

# 执行生成图表的接口
@app.route('/run_script')
def run_script():
    rand = np.random.normal(100, 1, size=[100, 1])
    plt.plot(rand)
    # 保存到Flask默认可访问的static目录
    plt.savefig('static/example_chart.png')
    plt.close()  # 释放内存资源
    return {'status': 'success'}

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

3. 修改HTML文件（重命名为index.html，放在templates目录下） #

添加图表展示标签，并修正AJAX请求目标为后端接口：

<!DOCTYPE html>
<html>
<head>    
</head>
<body>
    <input type="button" id='script' name="scriptbutton" value=" Run Script " onclick="goPython()">
    <!-- 用于展示生成的图表 -->
    <img id="chart_img" src="" style="display:none;" alt="生成的图表">

    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script>
        function goPython(){
            $.ajax({url: "/run_script", context: document.body})
            .done(function() {
                alert('Python脚本执行完成');
                // 加载新生成的图表（加时间戳避免缓存）
                $('#chart_img').attr('src', '/static/example_chart.png?' + new Date().getTime());
                $('#chart_img').show();
            })
            .fail(function() {
                alert('脚本执行失败');
            });
        }
    </script>
</body>
</html>

4. 运行服务 #

终端执行：

python app.py

打开浏览器访问http://127.0.0.1:5000，点击按钮即可生成并显示图表。

关于jQuery的疑问 #

不需要本地安装jQuery，你当前引用的远程CDN版本可直接使用，只要浏览器能联网就能正常加载。若需离线使用，可下载jQuery文件到本地目录，修改src为本地路径（如./jquery-3.3.1.min.js）。

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