【Django 2021年最新版教程6】前端传递数据到后端处理 POST方法

快来打我* 2022-10-17 00:40 139阅读 0赞

## 1. 前端add.html ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <body>
    <p>请输入两个数字</p>
    <form action="/doadd" method="post">
        {%csrf_token%}
        a: <input type="text" name="a"> <br>
        b: <input type="text" name="b"> <br>
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

一定要在html页面的form标签下加上

{%csrf_token%}

否则会报下面的错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 1][]

## 2.后端views.py ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 2][]

from django.http import HttpResponse
    from django.shortcuts import render
    
    # Create your views here.
    def index(request):
        return render(request, './userWeb/index.html')
    
    # 加法页面
    def add(request):
        return render(request, './userWeb/add.html')
    
    # 执行加法
    def doadd(request):
        a = request.POST['a']
        b = request.POST['b']
        a = int(a)
        b = int(b)
        result = a + b
        return HttpResponse(str(result))

## 3. 将页面路径添加到urls.py ##

path("add", add),
        path("doadd", doadd),

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 3][]

## 4. 效果 ##

![20210531155400539.png][]

![20210531155412117.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70]: /images/20221014/0f3a39dd406a401d81d98f5d9c43ac6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 1]: /images/20221014/38694104be6e4b44b933da210e7fdd06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 2]: /images/20221014/0d87e2bc30ee48168068a5c8b3ecaa50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 3]: /images/20221014/2e1ac5177e434fab89a368c3129de5d0.png
[20210531155400539.png]: /images/20221014/6da59b61a60d4acf9c7e8dcb8833834e.png
[20210531155412117.png]: /images/20221014/21cb0fa9e1644a27a08c2a02409816c3.png