$Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

一.ajax
  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json
  2 ajax干啥用的?前后端做数据交互:
  3 之前学的跟后台做交互的方式:
   -第一种:在浏览器窗口输入地址(get)
   -第二种:用form表单提交数据
  4 特点:
   -异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
   -局部刷新（*****）:
  5 $.ajax({
            url:'/index/',
            type:'post',
            //data:往后台提交的数据
            data:{'name':'lqz','age':18},
            //成功的时候回调这个函数
            success:function (data) {
                alert(data)
            }
        })
  6 上传文件
   模板层:
   <form action="" method="post" enctype="multipart/form-data">
   $("#btn").click(function () {

    //上传文件,必须用FormData,生产一个formdata对象
    var formdata=new FormData();

 

　//添加 text input 的数据
    formdata.append('name',$("#name").val());

    //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来
    formdata.append('myfile',$("#myfile")[0].files[0]);

 

    $.ajax({
     url:'/files_ajax/',
     type:'post',
     //不预处理数据,(name=lqz&age=18)
     processData:false,

     //指定往后台传数据的编码格式(urlencoded,formdata,json)
     //现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了
     contentType:false,
     data:formdata,
     success:function (data) {
      alert(data)

     }
    })

   视图层:(跟form表单上传文件完全一样)
   def files_ajax(request):
    # 提交文件从,request.FILES中取,提交的数据,从request.POST中取
    name=request.POST.get('name')
    print(name)
    myfile = request.FILES.get('myfile')
    with open(myfile.name, 'wb') as f:
     for line in myfile:
      f.write(line)
    return HttpResponse('ok')
   
  7 基于ajax提交json格式数据
   -模板层:
   <form action="" method="post" enctype="multipart/form-data"> 后台body 取到 b'name=1&age=2 

　<form> url上显示数据 后台body取到 b'字典

　　
    $('#btn').click(function () {
    var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};
    console.log(typeof post_data);
    // 如何把post_data这个字典,转成json格式字符串
    //JSON.stringify相当于python中json.dumpus(post_data)
    //pos是个字符串,json格式字符串
    var pos=JSON.stringify(post_data);
    console.log(typeof pos);
    $.ajax({
     url:'/json/',
     type:'post',
     data:pos,
     //后台返回的字符json数据格式自动转换成obj
     //dataType:'json',

     //指定数据格式类型
     contentType:'application/json',
     success:function (data) {
      //如果data是json格式字符串,如何转成对象(字典)?
      //data=JSON.parse(data)
      console.log(typeof data)
      console.log(data)
      var ret=JSON.parse(data)
      console.log(typeof ret)
      console.log(ret.status)
      //alert(data)

     }
    })
   })
   -视图层:
    def add_json(request):
     if request.method=='GET':
      return render(request,'json.html')
     print(request.POST)
     print(request.GET)
     print(request.body)
     import json
     # res是个字典
     res=json.loads(request.body.decode('utf-8'))
     print(res)
     print(type(res))
     dic={'status':'100','msg':'登录成功'}
     # 返回给前台json格式  (2种方式)
     return HttpResponse(json.dumps(dic)) #里面的为str字典 返回给前台str字典,前台指定datatype;'json',自动变成字典对象

     # return JsonResponse(dic) #dic为字典 返回给前台字典对象
      
   -重点:*****
    - 请求的编码方式:
     contentType:'application/json',
    -响应回来解析的方式
     dataType:'json',