django AJAX

布满荆棘的人生 2022-01-11 02:03 259阅读 0赞

### 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简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

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

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

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

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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部分代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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方法：

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

转载于:https://www.cnblogs.com/wangtenghui/p/11025002.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220111/257ad933306943bd980d8caa3d9ce137.png