[Django学习笔记]2ajax实现按按钮局部刷新与html透明立体容器样式等

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

上一节介绍了Django项目的创建. 对于一个网页而言,提交表单后需要给用户反馈, ajax则可以实现网页的局部刷新而不用重新加载整个网页. 这次的笔记就关于点击按钮, 局部刷新网页 的ajax简单实现, 以及网页数据可视化的图表库highcharts的简单上手,最后还包括一些html页面设计的内容.

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、ajax简单实现

1.html代码

导入jquery, 我将js代码放入了自己写的.js文件中,所以也需要导入.

<script src="../static/js/my.js"></script>
<script type="text/javascript" src="../static/js/jquery-3.6.0.min.js"></script>

定义一个button, 当被点击时,执行get_().

<script>var chart = null;</script>
<button class="mybutton" id="1" onclick="get_(chart)"></button>

定义图表容器DOM, 类似于"占位符", 用于填放数据/图像.

<!-- 图表容器 DOM -->
    <div id="container">

制作图表api需要使用的option数据:

<script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
    </script>

2.js代码

默认为异步方式, 成功后将调用success回调函数, 将获得的date信息进行处理(这里没date啥关系).

function get_(chart){
    var url = "yourURL";
    $.ajax({
        type: "get",
        url: url,
        data : 'json',
        timeout: 1000,
        success:function(date){
        	//生成图表实例,'container'表示将图表放入id="container"的容器中
            chart = Highcharts.chart('container', options);
        },
        error:function(){
            alert("失败");
        }
    });
}

3.配置url路径和编写view

urls.py

path('yourURL/', views.get_, name='get_'),

views.py
因为ajax代码中规定返回数据格式为’json’,所以一定要返回json数据

from django.http import JsonResponse


def get_(request):
    return JsonResponse({'msg': 'ok'})

4. 效果

点击按钮

出现图像

二、HTML样式的部分笔记

1.透明立体容器样式

/**
         * 整体居中功能；
         * 背景透明虚化
         * 溢出隐藏
         * 边缘圆角化
         * 文字增加淡阴影
        */
        .description{
            position: relative;
            margin:120px auto 0 auto;
            padding: 1em;
            max-width: 80em;
            background: hsla(0,0%,100%,.25) border-box;
            overflow: hidden;
            border-radius: .3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
        }

        /*使用滤镜模糊边缘*/
         .description::before{
            content: '';
            position: absolute;
            top: 0; right: 0; bottombottom: 0; left: 0;
            margin: -30px;
            z-index: -1;
            -webkit-filter: blur(20px);
            filter: blur(20px);
         }

使用实例如下:

<div class="description"></div>

2.网页拖动背景固定

<style>background-attachment: fixed;</style>

3.div添加滚动条

overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

1. visible :
   　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
2. auto : 　
   此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
3. hidden : 　不显示超过对象尺寸的内容
4. scroll : 　总是显示滚动条