zoukankan      html  css  js  c++  java
  • Django—AJAX

    多对多表三种创建方式

    1.第一种 django orm自动帮我们创建

    class Book(models.Model):
        name = models.CharField(max_length=32)
        authors = models.ManyToManyField(to='Author')
    
    class Author(models.Model):
        name = models.CharField(max_length=32)

    2.第二种纯手动创建第三张表

    无法跨表查询!必须手动一张表一张表手动去找,因为两张表没有表关系,不能进行反向正向查询

    class Book(models.Model):
        name = models.CharField(max_length=32)
    
    class Author(models.Model):
        name = models.CharField(max_length=32)
    
    class Book2Author(models.Model):
        book = models.ForeignKey(to='Book')
        author = models.ForeignKey(to='Author')
        info = models.CharField(max_length=32)

    3.第三种半自动创建第三张表(可扩展性高,并且能够符合orm查询)

    class Book(models.Model):
        name = models.CharField(max_length=32)
        # 第三种创建表的方式
        authors = models.ManyToManyField(to='Author',through='Book2Author',through_fields=('book','author'))
    
    class Author(models.Model):
        name = models.CharField(max_length=32)
        # book = models.ManyToManyField(to='Book',through='Book2Author',through_fields=('author','book'))
    
    class Book2Author(models.Model):
        book = models.ForeignKey(to='Book')
        author = models.ForeignKey(to='Author')
        info = models.CharField(max_length=32)

    前后端传输数据编码格式contentType

    urlencoded
        对应的数据格式:name=jason&password=666
        后端获取数据:request.POST
        ps;django会将urlencoded编码的数据解析自动放到request.POST
    formdata
        form表单传输文件的编码格式
        后端获取文件格式数据:request.FILES
        后端获取普通键值对数据:request.POST
    application/json
        ajax发送json格式数据
        需要注意的点
            编码与数据格式要一致

    AJAX

    AJAXAsynchronous Javascript And XML)翻译成中文就是异步的JavascriptXML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

    • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
    • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

    1.前端有哪些方式可以朝后端发请求

    浏览器窗口手动输入网址         get请求
    a标签的href属性                   get请求
    form表单                       get/post请求(默认是get请求)
    ajax                           get/post请求

    2.ajax特点

    异步提交,局部刷新

    3.ajax基本语法 

    提交的地址(url)
    提交的方式(type)
    提交的数据(data)
    回调函数(success)
    $('#d1').click(function () {
            $.ajax({
                // 提交的地址
                url:'/index/',
                // 提交的方式
                type:'post',
                // 提交的数据
                data:{'name':'jason','password':'123'},
                // 回调函数
                success:function (data) {  // data接收的就是异步提交返回的结果
                    alert(data)
                }
            })
        })

    4.ajax默认传输数据的编码格式也是urlencoded

    5.前后端传输数据,你不能骗人家,数据是什么格式就应该告诉别人是什么格式(数据与编码要一一对应)
    ajax传输json格式数据

    $('#d1').click(function () {
       $.ajax({
           url:'',  // url参数可以不写,默认就是当前页面打开的地址
           type:'post',
           contentType:'application/json',
           data:JSON.stringify({'name':'jason','hobby':'study'}),
           success:function (data) {
               {#alert(data)#}
               {#$('#i3').val(data)#}
           }
       })
    });

    ajax传输文件

    $('#d1').click(function () {
       let formdata = new FormData();
       // FormData对象不仅仅可以传文件还可以传普通的键值对
        formdata.append('name','jason');
        // 获取input框存放的文件
        //$('#i1')[0].files[0]
        formdata.append('myfile',$('#i1')[0].files[0]);
        $.ajax({
            url:'',
            type:'post',
            data:formdata,
            // ajax发送文件需要修改两个固定的参数
            processData:false,  // 告诉浏览器不要处理我的数据
            contentType:false,  // 不要用任何的编码,就用我formdata自带的编码格式,django能够自动识别改formdata对象
            // 回调函数
            success:function (data) {
                alert(data)
            }
        })
    });

    form表单与ajax异同点

    1.form表单不支持异步提交局部刷新
    2.form表单不支持传输json格式数据
    3.form表单与ajax默认传输数据的编码格式都是urlencoded

    批量插入数据

    l = []
    for i in range(10000):
        l.append(models.Book2(name='第%s本书'%i))
    models.Book2.objects.bulk_create(l)  # 批量插入数据
    补充:<li><a href="?page=1">1</a></li>  # 自动补全当前路径

    自定义分页器

    后端:
        book_list = models.Book2.objects.all()
        # 数据总条数
        all_count = book_list.count()
        # 当前页
        current_page = request.GET.get('page',1)
        # 示例一个分页器对象
        page_obj = my_page.Pagination(current_page=current_page,all_count=all_count)
        # 对总数据进行切片
        page_queryset = book_list[page_obj.start:page_obj.end]
    
    前端:
        {{ page_obj.page_html|safe }}  # 帮你渲染的是带有bootstrap样式的分页器
  • 相关阅读:
    dev控件学习笔记之----CxGrid2
    dev控件学习笔记之----CxGrid
    Bootstrap-table一个表格组件神器(学习一)使用详情
    vue学习(十一)组件全攻略
    bower学习(三)npm和bower的区别
    bower学习(二)命令
    brower学习(一)安装
    动画方案animate.css学习(一)
    vue学习(十)v-bind全攻略
    Vue学习(九)v-model全攻略
  • 原文地址:https://www.cnblogs.com/zhengyuli/p/11025074.html
Copyright © 2011-2022 走看看