Django与Ajax

目录

• Ajax
• 一、Ajax简介
  • 1.什么是ajax
  • 2.同步与异步
  • 3.XML格式与JSON格式
• 二、基本语法
• 三、Content-Type参数
  • 1.urlencoded
  • 2.form data
  • 3.Application/Json
• 四、Ajax携带文件数据
• 五、Ajax补充说明
  • 1.后端：request.is_ajax()
  • 2.后端返回的三大方法都会被ajax接收，不再影响整个浏览器页面
  • 3.选择使用ajax数据

Ajax

---

异步提交，局部刷新

ajax不是一门新的技术并且有很多版本，我们目前学习的是jquery版

一、Ajax简介

1.什么是ajax

Ajax即Asynchronous Javascript And XML 也就是异步 JavaScript和 XML

• 异步：和同步对应
• JavaScript：通过JavaScript来操作，发送请求到服务端
• XML：数据交互使用XML，现在主流使用JSON格式
• 局部刷新：JS的DOM操作

即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）

2.同步与异步

• 同步交互：客户端发出一个请求后，需要等待服务器响应接受后，才能发出第二个请求
• 异步交互：客户端发出一个请求后，不需要等待服务器响应结束，就可以发出第二个请求

3.XML格式与JSON格式

XML格式：

<name>duoduo</name>
<age>18</age>

JSON格式：

{
  "name":"duoduo",
  "age":"18",
}

对比：

格式	可阅读性	解析难度	空间占用
XML	高	复杂	大
JSON	高	简单	小

二、基本语法

	$.ajax({
        url:'',  
        type:'post',  // 请求方式 默认也是get
        data:{'v1':v1Val, 'v2':v2Val}, 
        success:function (args) {  
          后端响应的数据
          // 成功后 触发，后端返回结果之后自动触发 args接收后端返回的数据
},
    		error:function () {
          // 失败后 触发
}
})

• url 控制数据提交的地址

  有三种填写方式，与form标签的action一致

  1）不填写--超当前地址提交

  2）填写一个完整的网址--超完整网址提交

  3）路由--超该路由提交

• type控制数据提交的方式

  请求方式 默认也是get

• data提交的数据

  发送的数据，以字典的形式发送

• success 异步回调函数

  args接收后端返回的数据

  使用ajax交互，后端返回的数据会被args接受，不再影响整个浏览器页面

如何发送ajax：

• 通过绑定点击事件
• input框监听事件

三、Content-Type参数

编码格式，类似于数据报头

1.urlencoded

ajax默认的编码格式、form表单默认的格式

数据格式 ：xxx=yyy&uuu=ooo&...

django后端会自动将urlencoded数据处理到request.POST/request.GET

2.form data

包括文件数据

django后端针对普通的键值对还是处理到request.POST中，但是针对文件会处理到request.FILES

3.Application/Json

ajax支持发送的数据

• 普通数据urlencoded
• form data
• Application/json

request.body 前端发送的数据都先放在body中，如果是普通数据发送给POST，如果是文件会将普通数据放到POST中，文件数据交给FILES中

而json格式的数据则不处理放在body中，后端自己处理json格式数据

• 发送Json格式数据

  1.确保data对应的数据是json格式字符串

  data：JSON.stringify({})

  

  如果发送的是普通的字典，那么收到的数据会以xxx=yyy&aaa=bbb的形式展现，所以当以Json格式发送，浏览器则会有更好的渲染效果

  

  2.修改数据编码格式(默认是)

    <script>
        $('#d1').click(function (){
            $.ajax({
                url:'',
                type:'post',
                data:JSON.stringify({'name':'jason','age':18}),
                contentType:'application/json',
                success:function (){
                    alert('多喝热水哦')
                }
            })
        })
    </script>

四、Ajax携带文件数据

• 1.data换成文件对象

• 2.添加两个键值对

  contentType:false

  processData:false

<script>
    $('#d3').click(function () {
        // 1.先产生一个FormData对象
        let myFormDataObj = new FormData();
        // 2.往该对象中添加普通数据
        myFormDataObj.append('name', 'jason');
        myFormDataObj.append('age', 18);
        // 3.往该对象中添加文件数据
        myFormDataObj.append('file', $('#d2')[0].files[0])
        // 4.发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormDataObj,
 
            // ajax发送文件固定的两个配置
            contentType:false,
            processData:false,
            success:function (args){
                alert(args)
            }
        })
    })
</script>

五、Ajax补充说明

主要是针对回调函数args接收到的数据

1.后端：request.is_ajax()

判断是否是ajax请求

2.后端返回的三大方法都会被ajax接收，不再影响整个浏览器页面

选择和ajax交互，那么返回给后端的数据都会被ajax回调函数中的args形参接受

3.选择使用ajax数据

（1）JSON模块进行序列化

• 后端序列化

def ab_ajax_func(request):
    if request.method == "POST":
        user_dict = {"username": "duoduo", 'hobby': '你好吗'}
        import json
        json_data = json.dumps(user_dict)
        return HttpResponse(json_data)
    return render(request, 'ajaxtest.html')

通过自定义响应码，可以通过响应码的不同，在前端的ajax回调函数中做出不同的结果

• 前端反序列化

$('#d1').click(function(){
  $.ajax({
    url:'',
    type:'post',
    data:{'name':'duoduo'},
    success:function (args){
        console.log(args);
        console.log(typeof args);
        console.log(args.username);
        let userObj = JSON.parse(args)
        console.log(userObj);
        console.log(typeof userObj);
        console.log(userObj.username);
    }
    })
})

（2）JsonResponse

• 后端：通过JsonResponse

def ab_ajax_func(request):
    if request.method == "POST":
        user_dict = {"username": "duoduo", 'hobby': '你好吗'}
        return JsonResponse(user_dict)
    return render(request, 'ajaxtest.html')

• 前端：加一个配置dataType:'json'

 $('#d1').click(function(){
  $.ajax({
     url:'',
     type:'post',
     data:{'name':'duoduo'},
     dataType:'json',
     success:function (args){
         console.log(args);
         console.log(typeof args);
         console.log(args.username);
         console.log(args.hobby);
     }
     })
 })