Django入门到放弃之ajax

1.ajax简单使用

特性:
	1. 异步请求
	2. 局部刷新
	
	# 登录认证
	$.ajax({
		url:'/login/', #请求路径
 		type:'post' ,   #请求方式
		data:{
			username:$('#username').val(),
			password:$('#password').val(),
			},
			# 后端返回什么response就是什么
		success:function(response){
			  # response 响应内容
			var resStr = JOSN.parse(respone); #将响应内容序列化
			# {"aa":0,"bb":"/index/"}
			if (resStr['aa'] === 0){
				locaction.href=resStr['bb'];
				location.href='/index/';  #利用location实现页面跳转
			}
			else{
				...	
			}
		},
        # 请求失败时触发error执行，并将错误信息给error
        error:function(error){
            xxxxx
        }
	})
	
	
	view.py
        class LoginView(View):
        def get(self,request):
            return render(request,'login.html')

        def post(self,request):
            name = request.POST.get('uname')
            pwd = request.POST.get('pwd')
            if name == 'bge' and pwd == '213':
                ret = '{"code":0,"msg":"登录成功"}'
                return HttpResponse(ret)
            else:
                # return redirect(reverse('login'))
                ret = '{"code":3,"msg":"用户名或密码错误"}'
                return HttpResponse(ret)
urls.py
    path('login/', views.LoginView.as_view(),name='login'),

2.jax上传文件

固定模板

1 http请求，body体中放文件内容，ajax本质就是发送http请求，所以它可以上传文件
2 两种上传文件的方式，form表单，ajax

3 固定模板
    var formdata=new FormData() 
    formdata.append('myfile',$("#id_file")[0].files[0])
    # 还可以带数据
    $.ajax({
            url:'/uploadfile/',
            method: 'post',
            //上传文件必须写这两句话
            processData:false,  # 预处理数据，
            contentType:false,  # 不指定编码，如果不写contentType，默认用urlencoded
            data:formdata,      # formdata内部指定了编码，并且自行处理数据
            success:function (data) {  
                console.log(data)
            }
        })

form表单上传文件

upload.html
    <form action="/upload/" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        头像：<input type="file" name="head-pic">
        用户名：<input type="text" name="username">
        <input type="submit" value="提交">

    </form>
    <hr>
    <hr>
    ajax文件上传： <input type="file" id="file">
    ajax用户名 <input type="text" id="uname">
    <button id="btn">提交</button>



view.py
    def upload(request):
        if request.method == 'GET':
            return render(request,'uplaod.html')
        else:
            print(request.POST)
            print(request.FILES)
            file_obj=request.FILES.get('head-pic')
            print(file_obj)
            print(file_obj.name)
            path = os.path.join(settings.BASE_DIR,'static','image')
            file_path=os.path.join(path,file_obj.name)
            with open(file_path,'wb') as f:
                # for i in file_obj:
                #     f.write(i)
                for chunk in file_obj.chunks(chunk_size=65535): #默认为65535b
                    f.write(chunk)
            return HttpResponse('ok')

ajax上传文件

<script src="/static/jquery-3.3.1/jquery-3.3.1.js"></script>
<script>
    $('#btn').click(function () {
        var formdata = new FormData();   #ajax上传文件的时候，需要这个类型，它会将添加给它的键值对加工成formdata的类型
        formdata.append('name',$('#uname').val()); #添加键值的方法是append，注意写法，键和值之间是逗号
        formdata.append('file_obj', $('#file')[0].files[0]);
        formdata.append('csrfmiddlewaretoken',$('[name=csrfmiddlewaretoken]').val());
        $.ajax({
            url: '/upload/',
            type: 'post',
            data: formdata, #将添加好数据的formdata放到data这里
            processData:false,   // 不处理数据
            contentType:false,  // 不设置内容类型

            success: function (res) {
                console.log(res)

            }
        })
    })
</script>



def upload(request):
    if request.method == 'GET':
        return render(request,'uplaod.html')
    else:
        print(request.POST) #拿到的是post请求的数据,但是文件相关数据需要用request.FILES去拿
        print(request.FILES) #<MultiValueDict: {'head-pic': [<InMemoryUploadedFile: 1.png (image/png)>]}>
        file_obj=request.FILES.get('file_obj')
        print(file_obj)
        print(file_obj.name)
        path = os.path.join(settings.BASE_DIR,'static','image')
        file_path=os.path.join(path,file_obj.name)
        with open(file_path,'wb') as f:  #可以通过循环文件句柄或通过chunks方法获取文件数据
            # for i in file_obj:
            #     f.write(i)
            for chunk in file_obj.chunks(chunk_size=65535): #默认为65535b
                f.write(chunk)
        return HttpResponse('ok')

3.ajax提交json格式

$.ajax({
            url:'/uploajson/',  //写全，是什么样就写什么样
            method:'post',
            contentType: 'application/json',
            //data要是json格式字符串
            //data:'{"name":"","password":""}',
            //把字典转成json格式字符串
            //JSON.stringify(dic)
            //把json格式字符串转成对象
            //JSON.parse(data)
            data:JSON.stringify({name:$("#id_name1").val(),password:$("#id_password1").val()}),
            success:function (data) {
                //返回字符串类型，需要转成js的对象，字典

                //1 如果：django 返回的是HttpResponse，data是json格式字符串，需要自行转成字典
                //2 如果：django 返回的是JsonResponse，data是就是字典
                //ajax这个方法做的是，如果响应数据是json格式，自动反序列化
                console.log(typeof data)
                var res=JSON.parse(data)
                console.log(typeof res)
                console.log(res.status)
                console.log(res.msg)


            }
        })
        
     ================================================================================================   
    def data(request):
        l1=[11,22,33]
        res=request.GET.get('k1')
        print(request.get_full_path())
        print(request.body)
        return JsonResponse(l1,safe=False)  #注意，非字典类型的数据都需要加safe=False

4.json序列化时间日期类型的数据的方法

import json
from datetime import datetime
from datetime import date

#对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
    def default(self, field):
        if isinstance(field,datetime):
            return field.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(field,date):
            return field.strftime('%Y-%m-%d')
        else:
            return json.JSONEncoder.default(self,field)


d1 = datetime.now()

dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)

5.django内置序列化器

# 把对象转成json格式，json.dumps实现不了，
# django内置了一个东西，可以把对象转成json格式
from django.core import serializers
book_list = Book.objects.all()    
ret = serializers.serialize("json", book_list)  # ret就是json格式字符串