0

0

运行Python脚本如何通过浏览器运行 运行Python脚本的浏览器执行基础方法

星夢妙者

星夢妙者

发布时间:2025-08-18 18:23:01

|

992人浏览过

|

来源于php中文网

原创

Python不能直接在浏览器运行,因浏览器仅原生支持JavaScript。主流方案是通过Flask等Web框架在服务器端执行Python,生成HTML返回浏览器;或使用Pyodide、Brython等技术将Python代码转译或通过WebAssembly在浏览器中模拟执行。

运行python脚本如何通过浏览器运行 运行python脚本的浏览器执行基础方法

运行Python脚本,直接在浏览器里像JavaScript那样跑起来,这事儿吧,从技术栈的原生设计来看,是不太行的。浏览器里头,天生就懂HTML、CSS和JavaScript。Python,它得有个解释器才能跑,这解释器通常是在服务器端或者你的本地机器上。所以,如果你想让Python和浏览器发生点关系,通常得走两条路:一条是让Python在服务器上干活,把结果甩给浏览器看;另一条,就是通过一些非常规的,或者说,是新兴的技术,让Python的代码在浏览器环境里“模拟”运行。

解决方案

要让Python脚本在浏览器中“运行”,核心在于理解浏览器本身的执行环境。它不直接支持Python,所以我们需要一个“中间人”或者“翻译官”。

最常见且成熟的方案,是服务器端渲染(Server-Side Rendering, SSR)。Python在这里扮演的是一个后端角色。你用Python的Web框架,比如Flask、Django或者FastAPI,来构建一个Web应用。当用户在浏览器里访问你的页面时,浏览器发送一个请求给服务器。服务器上的Python应用接收到请求,根据请求内容,可能去数据库取数据,进行逻辑处理,然后把处理好的数据和HTML模板结合起来,生成一个完整的HTML页面。这个HTML页面再通过HTTP响应发回给浏览器。浏览器接收到HTML后,就负责解析、渲染,最终呈现在用户眼前。在这个过程中,Python代码本身并没有在浏览器里执行,它只是在服务器上生成了浏览器能理解的内容。

另一种更直接,但仍在发展中的方式,是通过WebAssembly(Wasm)或者JavaScript转译。这有点像给浏览器装了个“Python运行环境插件”。比如Pyodide项目,它把CPython解释器编译成了WebAssembly,这样你就可以在浏览器里直接运行Python代码了。还有Brython,它是一个Python到JavaScript的转译器,你的Python代码会被转换成JavaScript,然后在浏览器里执行。这种方式的好处是,某些简单的逻辑或者前端交互,可以直接用Python写,而不需要后端服务器的介入。但它也有局限性,比如文件大小(需要加载整个解释器或转译库)、性能,以及对Python库的兼容性问题。

立即学习Python免费学习笔记(深入)”;

为什么Python不能直接在浏览器里运行,它和JavaScript有什么不同?

我一直觉得,理解一个工具,得先明白它的“出身”和“使命”。Python和JavaScript,它们俩的设计初衷和运行环境就截然不同。JavaScript,它就是为了浏览器而生的,它的设计目标就是让网页动起来,处理用户交互,动态修改DOM。所以,所有的主流浏览器都内置了JavaScript引擎,它能直接解析并执行JS代码。这就像你买了个电视机,它天生就知道怎么播放电视信号。

Python呢,它是个通用型编程语言,应用范围广得吓人:数据分析、人工智能、后端开发、自动化脚本……它需要一个独立的解释器来运行代码。这个解释器通常安装在操作系统上,比如你的电脑、服务器。浏览器作为一个客户端应用,它的安全模型和资源限制决定了它不能随意加载和运行外部的、未编译的程序。你想想,如果浏览器能直接跑任何语言的脚本,那安全漏洞得多大?所以,浏览器选择只内置一个高度受控的脚本语言,那就是JavaScript。

它们最大的区别,在我看来,就是运行环境。JavaScript的“家”在浏览器,而Python的“家”在操作系统。当然,现在随着WebAssembly的发展,这个界限正在变得模糊,但本质上,Python依然需要一个“桥梁”才能踏入浏览器的领地。

使用Web框架让Python在浏览器“动起来”的具体步骤是什么?

这其实是目前最主流、最稳健的方案,也是我个人在实际项目中用得最多的。让Python在浏览器“动起来”,其实是指Python在服务器端处理逻辑,然后把结果以浏览器能理解的形式(HTML、CSS、JavaScript)发回去。

具体步骤,咱们以Flask这个轻量级框架为例,因为它概念清晰,容易上手:

听脑AI
听脑AI

听脑AI语音,一款专注于音视频内容的工作学习助手,为用户提供便捷的音视频内容记录、整理与分析功能。

下载
  1. 环境准备: 你得先在你的机器上安装Python,然后用

    pip
    安装Flask。
    pip install Flask

  2. 编写后端Python代码: 创建一个

    app.py
    文件。这里面就是你的Python逻辑。它会定义路由(URLs),当浏览器请求某个URL时,对应的Python函数就会被执行。

    from flask import Flask, render_template, request
    
    app = Flask(__name__)
    
    @app.route('/')
    def index():
        # Python处理逻辑,比如从数据库取数据
        data = {"message": "Hello from Flask!", "items": ["Item 1", "Item 2", "Item 3"]}
        # 将数据传递给HTML模板
        return render_template('index.html', context=data)
    
    @app.route('/greet', methods=['POST'])
    def greet():
        name = request.form.get('name') # 获取表单提交的数据
        if name:
            return f"Hello, {name}! This response came from Python on the server."
        return "Please provide a name."
    
    if __name__ == '__main__':
        app.run(debug=True) # 运行开发服务器
  3. 创建前端HTML模板:

    app.py
    同级目录下创建一个名为
    templates
    的文件夹,并在其中创建一个
    index.html
    文件。这个文件就是浏览器最终会渲染的页面骨架。

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Python与浏览器</title>
        <style>
            body { font-family: sans-serif; margin: 20px; }
            ul { list-style-type: none; padding: 0; }
            li { margin-bottom: 5px; }
        </style>
    </head>
    <body>
        <h1>{{ context.message }}</h1>
        <p>这里的内容是由Python在服务器端渲染后发送过来的。</p>
        <ul>
            {% for item in context.items %}
                <li>{{ item }}</li>
            {% endfor %}
        </ul>
    
        <h2>试试交互</h2>
        <form id="greetForm">
            <label for="userName">你的名字:</label>
            <input type="text" id="userName" name="name" required>
            <button type="submit">打个招呼</button>
        </form>
        <p id="responseMessage"></p>
    
        <script>
            document.getElementById('greetForm').addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止表单默认提交行为
    
                const formData = new FormData(this);
                fetch('/greet', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.text())
                .then(data => {
                    document.getElementById('responseMessage').innerText = data;
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('responseMessage').innerText = '请求失败,请检查控制台。';
                });
            });
        </script>
    </body>
    </html>
  4. 运行应用: 在命令行里,切换到

    app.py
    所在的目录,然后运行
    python app.py

  5. 浏览器访问: 打开你的浏览器,访问

    http://127.0.0.1:5000/

你会看到,页面内容已经由Python处理并填充好了。表单提交后,JavaScript将数据发送到服务器,Python处理后返回结果,再由JavaScript更新页面。这个流程完美体现了Python在后端、浏览器在前端的分工协作。

除了传统Web框架,还有哪些技术能让Python更接近浏览器前端?

除了上面提到的WebAssembly编译(如Pyodide)和JavaScript转译(如Brython),这些年确实涌现了一些很有意思的技术,它们试图让Python开发者能用更接近前端的方式来构建Web应用,减少JavaScript的依赖,或者至少让后端和前端的界限变得模糊。

一个值得关注的方向是全栈Python框架,比如Anvil。Anvil提供了一个拖拽式的界面设计器,但它最核心的理念是:前端和后端都可以用Python来写。它的工作原理是,你的前端Python代码实际上是在浏览器中运行的,但它通过Anvil自己的通信协议与后端Python服务进行交互。这使得你可以用Python直接操作前端组件,而不需要写JavaScript。对于那些不想碰JS的Pythonista来说,Anvil提供了一个非常完整的解决方案。它不是把Python编译成JS,而是提供了一个运行时环境和一套组件库。

另一个趋势是基于Python的数据应用框架,比如StreamlitDash。它们的目标用户主要是数据科学家和分析师,让他们能快速地用纯Python代码构建交互式的数据仪表板和Web应用。你写Python代码,调用它们的组件库,这些框架会在后台自动处理HTML、CSS和JavaScript的生成和通信。它们通常会启动一个Python服务器,负责渲染页面、处理用户输入,并将更新发送回浏览器。虽然Python代码没有直接在浏览器里运行,但从开发者的角度看,你几乎只在写Python,就能得到一个功能丰富、可在浏览器中交互的Web应用。它们把Web开发的复杂性封装得很好。

这些技术各有侧重,Pyodide/Brython更偏向于在浏览器内执行Python代码片段,而Anvil、Streamlit、Dash则更像是一种“Python优先”的Web应用开发范式,它们将Web的复杂性抽象掉,让Python开发者能够专注于业务逻辑和数据呈现,而无需深入了解底层的前端技术细节。选择哪种,很大程度上取决于你的项目需求、对性能和灵活性的要求,以及你愿意投入学习的精力。我个人觉得,对于快速原型开发和数据应用,Streamlit和Dash简直是神器。而对于更复杂的、需要高度定制的前端交互,传统Web框架结合JavaScript依然是主流,或者可以考虑Pyodide这类“真·浏览器Python”方案,但要做好应对挑战的准备。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python Web 框架 Django 深度开发
Python Web 框架 Django 深度开发

本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧,包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例,帮助学习者掌握 使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

167

2026.02.04

Python Flask框架
Python Flask框架

本专题专注于 Python 轻量级 Web 框架 Flask 的学习与实战,内容涵盖路由与视图、模板渲染、表单处理、数据库集成、用户认证以及RESTful API 开发。通过博客系统、任务管理工具与微服务接口等项目实战,帮助学员掌握 Flask 在快速构建小型到中型 Web 应用中的核心技能。

106

2025.08.25

Python Flask Web框架与API开发
Python Flask Web框架与API开发

本专题系统介绍 Python Flask Web框架的基础与进阶应用,包括Flask路由、请求与响应、模板渲染、表单处理、安全性加固、数据库集成(SQLAlchemy)、以及使用Flask构建 RESTful API 服务。通过多个实战项目,帮助学习者掌握使用 Flask 开发高效、可扩展的 Web 应用与 API。

81

2025.12.15

Python FastAPI异步API开发_Python怎么用FastAPI构建异步API
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API

Python FastAPI 异步开发利用 async/await 关键字,通过定义异步视图函数、使用异步数据库库 (如 databases)、异步 HTTP 客户端 (如 httpx),并结合后台任务队列(如 Celery)和异步依赖项,实现高效的 I/O 密集型 API,显著提升吞吐量和响应速度,尤其适用于处理数据库查询、网络请求等耗时操作,无需阻塞主线程。

28

2025.12.22

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

253

2026.02.06

pip安装使用方法
pip安装使用方法

安装步骤:1、确保Python已经正确安装在您的计算机上;2、下载“get-pip.py”脚本;3、按下Win + R键,然后输入cmd并按下Enter键来打开命令行窗口;4、在命令行窗口中,使用cd命令切换到“get-pip.py”所在的目录;5、执行安装命令;6、验证安装结果即可。大家可以访问本专题下的文章,了解pip安装使用方法的更多内容。

373

2023.10.09

更新pip版本
更新pip版本

更新pip版本方法有使用pip自身更新、使用操作系统自带的包管理工具、使用python包管理工具、手动安装最新版本。想了解更多相关的内容,请阅读专题下面的文章。

437

2024.12.20

pip设置清华源
pip设置清华源

设置方法:1、打开终端或命令提示符窗口;2、运行“touch ~/.pip/pip.conf”命令创建一个名为pip的配置文件;3、打开pip.conf文件,然后添加“[global];index-url = https://pypi.tuna.tsinghua.edu.cn/simple”内容,这将把pip的镜像源设置为清华大学的镜像源;4、保存并关闭文件即可。

803

2024.12.23

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 43.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号