AJAX

一、什么是ajax？

异步的JavaScript和xml,跟后台交互,都用json

二、ajax干啥用的

前后端做数据交互

三、之前学的跟后台做交互的方式:

# 第一种:在浏览器窗口输入地址(get)
# 第二种:用form表单提交数据

四 特点:

# 异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
# 局部刷新: 

五、简单使用

<script>
$.ajax({
    url:'/index/',
    type:'post',
    //data:往后台提交的数据
    data:{'name':'lqz','age':18},
    //成功的时候回调这个函数
    success:function (data) {
        alert(data)
    }
})
</script>

六、上传文件

<script>
// 模板层:
    $("#btn").click(function () {
        //上传文件,必须用FormData,生产一个formdata对象
        var formdata=new FormData();
        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)

            }
        })
</script>

# 视图层:(跟form表单上传文件完全一样)
def files_ajax(request):
    # 提交文件从,request.FILES中取,提交的数据,从request.POST中取
    name=request.POST.get('name')
    print(name)
    dic_files = request.FILES
    myfile = dic_files.get('myfile')
    with open(myfile.name, 'wb') as f:
        # 循环上传过来的文件
        for line in myfile:
            # 往空文件中写
            f.write(line)
    return HttpResponse('ok')

七、基于ajax提交json格式数据

<script>
// 模板层:
    $('#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,
            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)

            }
        })
    })
</script>

# 视图层:
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':'登录成功'}
    # return HttpResponse('ok')
    # 返回给前台json格式
    return HttpResponse(json.dumps(dic))
    # return JsonResponse(dic)

重点:

• 请求的编码方式:
  contentType:'application/json',
• 响应回来解析的方式
  dataType:'json',