django框架——ajax 请求

ajax请求

异步提交 局部刷新

发送请求的方式
	1.浏览器地址栏输入url           					  GET请求
	2.a标签href属性										 GET请求
	3.form表单										   GET请求/POST请求
	4.ajax											    GET请求/POST请求	

ajax发送普通数据

$('#btn').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
            success:function (args) {
                $('#d3').val(args)
            }
        })
    })
             
              
后端是用HttpResponse返回的数据 回调函数不会自动反序列化
后端用的是JsonResponse返回的数据 回调函数会自动反序列化

HttpResponse解决方式
	1.在前端利用JSON.parse()
	2.在ajax里面配置一个参数
	  ajax里加dataType:'json'

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

	urlencoded
	
	formdata
	
	json

form表单
默认的数据编码格式是urlencoded
formdata
form表单是不能发送json格式数据

ajax
默认的编码格式urlencoded
post,json

ajax发送json格式数据

ajax发送json格式数据需要注意点
	1.contentType参数指定成:application/json
	2.发送的数据一定是json格式，对应
	3.django后端不会处理json格式数据 要从request.body获取并处理 

request.is_ajax()
判断是否是ajax请求

<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'jason','age':25}),
            contentType:'application/json',  // 指定编码格式
            success:function (视图函数的返回值) {
                回调函数
            }
        })
    })
</script>


json_bytes = request.body

json_str = json_bytes.decode('utf-8')
json_dict = json.loads(json_str)
# json.loads自动解码反序列化 跟Python解释器版本有关，3.5 还不行
json_dict = json.loads(json_bytes)

ajax发送文件

ajax发送文件需要借助于js内置对象FormData

<script>
    $('#d4').on('click',function () {
        let formDateObj = new FormData();
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        formDateObj.append('myfile',$('#d3')[0].files[0])
        $.ajax({
            url:'',
            type:'post',
            data:formDateObj,
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉浏览器不要对数据进行任何处理
            success:function (args) {
            }
        })
    })
</script>

序列化器

需求:在前端获取到后端用户表里面所有的数据 并且要是列表套字典
import json
from django.http import JsonResponse
from django.core import serializers

def ab_ser(request):
    user_queryset = models.User.objects.all()
    
    # 自己凑出来
    user_list = []
    for user_obj in user_queryset:
       tmp = {
           'pk':user_obj.pk,
           'username':user_obj.username,
           'age':user_obj.age,
           'gender':user_obj.get_gender_display()
       }
       user_list.append(tmp)
    return JsonResponse(user_list,safe=False)

自己形成列表的数据
[
 {"pk": 1, "username": "jason", "age": 25, "gender": "male"}, 
 {"pk": 2, "username": "egon", "age": 31, "gender": "female"},
 {"pk": 3, "username": "kevin", "age": 32, "gender": "others"}, 
 {"pk": 4, "username": "tank", "age": 40, "gender": 4}
 ]
	 # 序列化
    res = serializers.serialize('json',user_queryset)
    return HttpResponse(res)

序列化组件serializers形成的数据
[
{   "model": "app01.user", 
    "pk": 1, 
    "fields": {"username": "jason", "age": 25, "gender": 1}}, 
    
{   "model": "app01.user", 
    "pk": 2, 
    "fields": {"username": "egon", "age": 31, "gender": 2}}, 
    
{   "model": "app01.user", 
    "pk": 3, 
    "fields": {"username": "kevin", "age": 32, "gender": 3}},
     
{   "model": "app01.user", 
    "pk": 4, 
    "fields": {"username": "tank", "age": 40, "gender": 4}}
]

ajax结合sweetalert

<script>
    $('.del').on('click',function () {
        
        // 先将当前标签对象存储起来
        let currentBtn = $(this);
        
        // 二次确认弹框
        swal({
        },
        function(isConfirm) {
          if (isConfirm) {
                // 朝后端发送ajax请求删除数据之后 再弹下面的提示框
              
                $.ajax({
                    url:'/delete/user/' + currentBtn.attr('delete_id'), 
                        传递主键值方式1
                    url:'/delete/user/',  // 2 放在请求体里面
                    type:'post',
                    data:{'delete_id':currentBtn.attr('delete_id')},
                    success:function (args) {  
                        // args = {'code':'','msg':''}
                        // 判断响应状态码 然后做不同的处理
                        
                        if(args.code === 1000){
                            swal("删了!", args.msg, "success");
                            
                            // 1.lowb版本 直接刷新当前页面
                            window.location.reload()
                            
                            // 2.利用DOM操作 动态刷新
                            currentBtn.parent().parent().remove()
                            
                        }else{
                            swal('完了','出现了位置的错误','info')
                        }
                    }

                })

          } else {
            swal("怂逼", "不要说我认识你", "error");
          }
        });
    })

</script>

批量插入

    # 批量插入
    book_list = []
    for i in range(100000):
        book_obj = models.Book(title='第%s本书'%i)
        book_list.append(book_obj)
        
    models.Book.objects.bulk_create(book_list)