Ajax

例子：github注册页面

  1. 异步提交，提交以后不等待

  2. 局部刷新

向后端发送请求的方式 什么请求
浏览器地址栏输入url回车 GET
a标签的href属性 GET
form表单 GET/POST
Ajax GET/POST

学jQuery封装之后的版本，在前端页面使用ajax的时候需要确保导入了jQuery

回调函数不会自动反序列化后端用HttpResponse返回的数据，会自动反序列化后端用JsonResponse返回的数据，

在前端手动反序列化HttpResponse返回的数据的方式

  1. JSON.parse()
  2. 在ajax配置一个参数dataType:true，自动反序列化（老师演示失败）
#后端
def ab_ajax(request):
    if request.method == 'POST':
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        i3 = int(i1) + int(i2)
        dict = {'code': 100, 'msg': i3}
        #方式一
        # return HttpResponse(json.dumps(dict))
        #方式二
        return JsonResponse(dict)
    return render(request, 'ajax.html')


#ajax基本语法
$('#d4').click(function (){
            $.ajax({
                {## 1.指定向哪个后端发送ajax请求}#}
                url:'',
                {#2.请求方式#}
                type:'post',
                {#3.数据#}
                data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
                {#4.回调函数:当后端返回结果的时候会自动触发该函数#}
                {#后端返回的结果不在直接作用于浏览器，而是给到回调函数，由args参数接收#}
                {#dataType:true,加了报错#}
                success:function (args){
                    
				#方式一，通过HttpResponse返回的数据,要手动反系列化
                    {#dic=JSON.parse(args)#}
                    {#$('#d3').val(dic.msg)#}
                      #方式二,通过JsonResponse返回的结果，在前端自动反序列化成Object对象
                     $('#d3').val(args.msg)
                }
            })
        })

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

主要研究post请求数据的编码格式，get请求数据是直接放在url里面的问号后面的，格式：name=jason&age=18

前端向后端发送post请求的方式：

1.form表单

2.ajax

form表单

默认的数据编码格式是urlencoded，数据格式：name=jason&age=18

django后端对符合urlencoded编码格式的数据，会自动解析封装到request.POST中

如果编码格式为：formdata，会把普通的键值对封装到request.POST中，把文件封装到request.FILES中

form表单不能发送json格式数据

ajax

默认的数据编码格式是urlencoded，数据格式：name=jason&age=18

ajax发送json格式数据

request.is_ajax() #用于判断当前请求是否是ajax请求

<body>
    <button id="d1" >提交</button>
    <script>
        $('#d1').click(function () {
            $.ajax({
                url:'',
                type:'post',
                data:JSON.stringify({'name':'jason','age':18}),
                //dataType:'JSON',
                {#指定传输数据的编码格式#}
                contentType:'application/json',
                success:function(args){

            }
            })
        })
    </script>
</body>

django后端对json格式数据不会做任何处理，通过request.body来获取

def ajax_json(request):
    if request.is_ajax():
        
        json_bytes=request.body
        print(json_bytes)
        # 方式一，手动解码，然后反序列化
        json_str=json_bytes.decode('utf-8')
        print(json_str)
        dict=json.loads(json_str)
        
        # 方式二
        #json.loads()内部识别到二进制数据后，会自动解码，然后反序列化
        # dict=json.loads(json_bytes)
        print(dict)
    return render(request,'ajax_json.html')

'''
b'{"name":"jason","age":18}'
{"name":"jason","age":18}
{'name': 'jason', 'age': 18}
'''
ajax发送文件数据

需要利用内置对象FormData，既可以发普通键值对，又可以发文件

<body>
    name:<input type="text" id="d1">
    age:<input type="text" id="d2">
    <input type="file" id="d3">
    <button id="d4">提交</button>

    <script>
        $('#d4').on('click',function () {
            let formDataObj=new FormData()
            formDataObj.append('name',$('#d1').val())
            formDataObj.append('age',$('#d2').val())
            //
            formDataObj.append('myfile',$('#d3')[0].files[0])

            $.ajax({
                url:'',
                type:'post',
                data:formDataObj,
                //不使用任何编码，django后端能够自动识别FormData对象
                contentType:false,
                //告诉浏览器不要对数据进行任何处理
                processData:false,
                success:function () {

                }

            })
        })
    </script>
</body>

django后端能够自动识别FormData对象

def ajax_file(request):
    if request.is_ajax():
        if request.method=='POST':
            print(request.POST)
            print(request.FILES)

    return render(request, 'ajax_file.html')
'''
<QueryDict: {'name': ['aa'], 'age': ['18']}>
<MultiValueDict: {'myfile': [<InMemoryUploadedFile: 杂.txt (text/plain)>]}>
'''

批量插入

# 每次插入一条数据
for i in range(1000):
	models.Book.objects.create(book_name='第%s本书'%i)


#批量将数据插入数据库
book_list=[]
for i in range(1000):
    # 这里没有操作数据库
    book_obj=models.Book(book_name='第%s本书'%i)
    book_list.append(book_obj)
# 这里一次性操作数据库
models.Book.objects.bulk_create(book_list)