zoukankan      html  css  js  c++  java
  • django AJAX

    MTV与MVC(了解)   

    MTV模型(django):

    M:模型层(models.py)
    T:templates
    V:views

      MVC模型:

    M:模型层(models.py)
    V:视图层(views.py)
    C:控制器(Controller) urls.py

    本质:django的MTV也是MVC

    多对多表三种创建方式

      1.django自动帮我们创建

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

      2.纯手动创建第三张表

    class Book(models.Model):
        name = models.CharField(max_length=32)
    
    
    class Author(models.Model):
        name = model.CharField(max_length=32)
    
    
    class Book2Author(models.Model):
        book = model.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 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

      AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

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

      局部刷新:页面的某一特定区域进行刷新,其余地方不会刷新

    示例:页面输入两个整数,通过AJAX传输到后端计算结果并返回

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
    <button id="b1">Ajax Test</button>
    
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script>
        $('#b1').click(function () {
            $.ajax({
                url:'',
                type:'POST',
                data:{i1:$('#i1').val(),i2:$('#i2').val()},
                success:function (data) {
                    $('#i3').val(data)
                }
            })
        })
    
    </script>
    </body>
    </html>
    HTML部分代码
    def ajax_test(request):
        if request.method=='POST':
            i1=request.POST.get('i1')
            i2=request.POST.get('i2')
            ret=int(i1)+int(i2)
            return HttpResponse(ret)
        return render(request,'ajax_test.html')
    views.py
    from django.conf.urls import url
    from app01 import views
    urlpatterns=[
        url(r'^ajax_test/',views.ajax_test),
    ]
    urls.py

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

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

    ajax基本语法

    提交的地址(url)
    提交的方式(type)
    提交的数据(data)
    回调函数(success)
    
    $("#b1").on("click", function () {
        $.ajax({
          url:"/ajax_add/",
          type:"GET",
          data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
          success:function (data) {
            $("#i3").val(data);
          }
        })
      })

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

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

    $('#d1').click(function () {
    $.ajax({
    url:'', // url参数可以不写,默认就是当前页面打开的地址
    type:'post',
    contentType:'application/json',
    data:JSON.stringify({'name':'jason','hobby':'study'}),
    success:function (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> # 自动补全当前路径

    AJAX请求如何设置csrf_token

    方式1

    通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。

     
    $.ajax({
      url: "/cookie_ajax/",
      type: "POST",
      data: {
        "username": "Tonny",
        "password": 123456,
        "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用JQuery取出csrfmiddlewaretoken的值,拼接到data中
      },
      success: function (data) {
        console.log(data);
      }
    })

    方式2

    通过获取返回的cookie中的字符串 放置在请求头中发送。

    注意:需要引入一个jquery.cookie.js插件。

    $.ajax({
      url: "/cookie_ajax/",
      type: "POST",
      headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrf_token,并设置ajax请求头
      data: {"username": "Q1mi", "password": 123456},
      success: function (data) {
        console.log(data);
      }
    })
    

    方式3

    或者用自己写一个getCookie方法:

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。

    function csrfSafeMethod(method) {
      // these HTTP methods do not require CSRF protection
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    
    $.ajaxSetup({
      beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
      }
    });
  • 相关阅读:
    P1631-序列合并
    P1484-种树
    17.树的子结构(python)
    16.合并两个排序的链表(python)
    反转链表
    链表中倒数第k个节点(python)
    调整数组顺序使奇数位于偶数前面(python)
    Spark--wordcount(词频降序)
    数值的整数次方
    二进制中1的个数(python)
  • 原文地址:https://www.cnblogs.com/wangtenghui/p/11025002.html
Copyright © 2011-2022 走看看