【Django 2021年最新版教程7】前端html接收后端传递的变量值渲染

柔光的暖阳◎ 2022-10-17 01:50 145阅读 0赞

本节教程基于【Django 2021年最新版教程6】前台传递数据到后台处理 POST方法

[https://shijianfeng.blog.csdn.net/article/details/117418093][https_shijianfeng.blog.csdn.net_article_details_117418093]

## 1. 前端新建add\_result.html ##

在html中使用\{ \{变量名\}\}接收后端传递的变量值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <body>
    <h2>计算结果</h2>
    
    {
       { a }} + {
       { b }} = {
       { result }}
    
    </body>
    </html>

## 2.后端views.py ##

通过context数据传递值给html页面。

使用render函数渲染html页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 1][]

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))
        context = {}
        context['a'] = a
        context['b'] = b
        context['result'] = result
        return render(request, './userWeb/add_result.html', context)

## 3.执行效果 ##

![20210601171552857.png][]

![20210601171604852.png][]

[https_shijianfeng.blog.csdn.net_article_details_117418093]: https://shijianfeng.blog.csdn.net/article/details/117418093
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70]: /images/20221014/17f0e20717cb4e37bab7043cc6d520e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 1]: /images/20221014/529c1b3c7e384037aef8fbcbd11c8033.png
[20210601171552857.png]: /images/20221014/bb52e294c57a40c398a0c43e6c54839a.png
[20210601171604852.png]: /images/20221014/09ff5cddfb064e578a1d1e1669db8763.png