前后台数据交互

前后台数据传递的方式

1.方式一：Jsonchuandi

可以通过json将字典数据进行序列化，然后通过HttpResponse将字符数据传递给前端的ajax，ajax通过success：function（data）中的data来捕获数据，然后再ajax中通过JSON.parse(data)的方式将字符数据进行反序列化成字典

2.方式二：JsonResponse传递

再后台通过导入from django.html import JsonResponse来导入JsonResponse的方式，将字典数据直接传入JsonResponse（）中，传入到客户端ajax中也是反序列化后的字典数据，可以直接取用

onclick点击事件触发确认是否提交

方式一：需自定义函数

html：
<a href="/del_class/?id={{ item.id }}" onclick="return myfunc();">删除</a>

script：
function myfunc(){
        res = window.confirm('是否确定删除??');
        return res
    }

方式二：jq语句

html:
<a class="del"  val="{{ item.id }}">删除</a>
script:
$(".del").click(function () {
        re=window.confirm('是否确定删除');
        if (re){
            $.ajax({
                type:"GET",
                url: '/del_class/',
                data: {"classid":$(this).attr('val')},
            });
            alert('删除成功');
            window.location.href = '/classes/';
        }else{
            alert('取消删除');
        }
})

两个按钮间传值

按钮一

$('.btn-2').click(function () {
        $(".shadow, .content-2").show();
        var tds = $(this).parent().prevAll();
        var classname = $(tds[0]).text();
        var classid = $(tds[1]).text();
        $('#classname-2').val(classname);
        $('#clasid').val(classid);

按钮二

$('#sbm-2').click(function () {
        var clasname = $('#classname-2').val(); //获取按钮一存的值
        var classid = $('#classid').val();  //获取按钮一存的值
        $.ajax({
            type:"POST",
            url:"/ajax_up_classes/",
            data: {"classid":classid,"classname": clasname},
            success:function (data) {
                if (data['code'] == 1000){
                    window.location.reload();
                    {#window.location.href = '/classes/';#}
                } else{
                    $('#err').text(data['data'])
                }
            }
        })
    });

前端页面(跳转/刷新)的方式

方法一:跳转链接

window.location.href = '/classes/'; 

方法二：刷新页面

window.location.reload();

点击调整css中的dispiay的值是否显示与隐藏

与$div.css('样式','值')设置值的方式一样

$(".shadow").show();  //显示
$(".shadow").hide();  //隐藏

打印的方法

方法一：打印到console

console.log()

方法二：打印到浏览器弹框

alert('添加成功')