Python与HTML实现前后端不分离的数据交互教程

Ada

发布时间：2026-10-15| 7人浏览过

原创

本文详细记录了使用Python的Django框架与HTML实现前后端不分离的数据交互过程。通过创建Django项目，编写后端视图处理逻辑与前端表单页面，实现了从用户输入数据、后端计算到结果返回前端显示的全流程。教程涵盖项目创建、代码编写及启动测试步骤，适合初学者参考。

前言

近期开始探索如何将Python后端与HTML前端进行结合，特此撰写博客以记录实践过程。本文采用的技术方案为前后端不分离架构。

接下来直接演示一个基础的计算功能：前端负责接收用户输入的数据，后端执行计算逻辑并将结果返回至前端进行展示。

1. Python开发工具

开发环境选择PyCharm专业版，原因是社区版不支持直接创建Django项目。

2. 项目创建

首先启动PyCharm，新建一个Django项目。

在创建界面中，圈出的部分为自定义的项目名称，点击右下角的Create按钮即可完成Django项目的创建。

如下图所示，圈出的项目名称与上一步骤中的设置相对应。

第二步：编写后端代码

①在blog文件夹下的views.py文件中，添加以下代码：

from django.shortcuts import render
from calculate import jisuan
# Create your views here.
 
def calculate(request):
    return render(request, 'hello.html')
 
def show(request):
    x = request.POST.get('x')
    y = request.POST.get('y')
    result = jisuan(x, y)
    return render(request, 'result.html', {'result': result})

②在csdn文件夹下的urls.py文件中，添加如下加粗显示的两行代码：

from django.shortcuts import render
from calculate import jisuan
# Create your views here.
 
def calculate(request):
    return render(request, 'hello.html')
 
def show(request):
    x = request.POST.get('x')
    y = request.POST.get('y')
    result = jisuan(x, y)
    return render(request, 'result.html', {'result': result})

③新建calculate.py文件，其内容如下：

def jisuan(x, y):
    x = int(x)
    y = int(y)
    return (x+y)

第三步：编写前端代码

①数据输入页面hello.html，具体内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="/getdata/">
    {% csrf_token %}
    <input type="text" name="x" placeholder="请输入x"/><br>
    <input type="text" name="y" placeholder="请输入y"><br>
    <input type="submit" value="进行计算">
</form>
 
</body>
</html>

②结果显示页面result.html，具体内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color:blue">计算结果为{{ result }}</h1>
</body>
</html>

第四步：启动后台程序

在浏览器地址栏输入http://127.0.0.1:8000/jisuan

按下回车键即可进入数据输入页面。