day01

笔记记录:

1.AJAX 提交POST 请求数据: 模板语法!!
data:{'csrfmiddlewaretoken':'{{ csrf_token }}' }
# 前端参数如果没有起作用 你可以尝试着给参数加一个引号

2.项目数据表个创建:

流程:1.先确定表名
	 2.确定字段
      3.确定表关系

3.表关系 : 自关联表关系
  --eg: 评论区内包含子评论
parent   : 跟自己所在的表外键关联(一对多)
parent = models.ForeignKey(to='self',null=True)  # 语义更明确

4.创建表内的字段:
avatar = models.FileField(upload_to='avatar/',default='')
# 该字段你直接传文件即可 会自动将文件保存到avatar文件夹下  然后数据库里面存文件路径 (默认一个文件路径)

上传文件(文件,图片,音频,视频) --》默认文件夹

5.数据库:
在mysql的命令模式下,输入:同步数据库
set global time_zone='+8:00';


6.前端each() :
    --$.each()是对数组,json和dom结构等的遍历
    --通过$.each() 提取相关数据,添加到数组中
    {{each(i, card) data}} i 相当于for 循环中的递增变量, card 是迭代变量,data是传入的json数据
   
  
7.前端change():
    --具有改变的意思,change事件会在元素数据发生变化的时候触发
    
8.ajax发送文件时:
发送文件一定要指定两个参数
  processData:false,  // 不要让浏览器处理你的数据
  contentType:false,  不要使用任何的编码  django能够识别对象自身

头像上传

<script>
    $('#mdd').on('change',function () {
        // 需要利用内置对象 FileReader完成文件的读取操作
        let MyFileReader = new FileReader();
        // 获取用户上传的文件对象
        let fileObj = $(this)[0].files[0];
        // 让文件阅读器 读取文件
        MyFileReader.readAsDataURL(fileObj);  // IO操作   异步
        // 将读取之后的内容替换到img标签src属性中
        MyFileReader.onload = function(){  // 等待文件阅读器读取完毕之后再执行下面的代码
             $('#img').attr('src',MyFileReader.result)
        }
    });

#头像上传

ajax 提交数据

  // 提交按钮
    $('#submit').click(function () {
        // 将用户输入的数据全部发送给后端     普通的键值对   文件
        let MyFormData = new FormData();
        // 不停的朝里面添加键值对
        {#MyFormData.append('','')#}
        {#console.log($('#myform').serializeArray())#}
        // 普通键值对添加完毕 (利用form标签内部有一个自动序列化普通键值对方法)
        $.each($('#myform').serializeArray(),function (index,obj) {
            MyFormData.append(obj.name,obj.value)
        });
        // 手动添加文件数据
        MyFormData.append('avatar',$('#mdd')[0].files[0]);
        // 发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,
            // 发送文件一定要指定两个参数
            processData:false,  // 不要让浏览器处理你的数据
            contentType:false,  // 不要使用任何的编码  django能够识别对象自身

            success:function (data) {
                if (data.code == 1000){
                    // 跳转到登录页面
                    window.location.href = data.url
                }else{
                    $.each(data.msg,function (index,obj) {
                        // {#console.log(index,obj)#} index就是报错字段  obj就是错误信息 数组的形式
                        // 获取报错字段  手动拼接处该字段所对应的input框的id值
                        let targetId = '#id_' + index;
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                    })
                }
            }
        })

#ajax 提交前端客户输入的键值对 和 文件
      对后端与前端校验后的结果,做出响应

获取焦点事件:

// input框获取焦点事件
    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
    
 $(this)[0].files[0]

#获取或删除 input 样式的属性 
#获取input 框内文件的内容
posted @ 2019-12-06 20:46  black__star  阅读(99)  评论(0编辑  收藏  举报