Django Ajax

Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

　　同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

　　异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

优点：

　　1.AJAX使用Javascript技术向服务器发送异步请求

　　2.AJAX无须刷新整个页面

Ajax往后台发送数据

<body>
<button class="btn">点我朝后台发数据</button>
</body>

body

$(".btn").click(function () {
        $.ajax({
            //url:向后台发送请求的地址
            url:'/index/',
            //以什么方式发请求
            type:'post',
            //data:往后台提交的数据
            data:{'name':'lll','age':18},
            //成功的时候回调这个函数
            success:function (data) {
                alert(data)
            }
        })
    })

javascript

通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"> </script>
    <title>Title</title>
</head>
<body>
<p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p>
<button class="btn">点我</button>
</body>
<script>
    $(".btn").click(function () {
        $.ajax({
            url:'add',
            type:'post',
            //$("#add1").val() 取到id为add1这个控件的value值
            data:{'add1':$("#add1").val(),'add2':$("#add2").val()},
            success:function (data) {
                //赋值
                $("#sum").val(data)

                location.href='/index/'
            }
        })
    })
</script>
</html>

HTML代码

def add(request):
    if request.method=='GET':
        return render(request,'add.html')
    add1=request.POST.get('add1')
    add2=request.POST.get('add2')
    sum=int(add1)+int(add2)
    return HttpResponse(str(sum))

视图层代码

通过Ajax上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
<form action="/files/" method="post" enctype="multipart/form-data">
    <p><input type="file" name="myfile" id="myfile"></p>
</form>
<button class="btn">ajax提交</button>
</body>
<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>
</html>

HTML+JS

def files_ajax(request):
    if request.method == 'GET':
        return render(request, 'files.html')
    else:
# 提交文件从,request.FILES中取,提交的数据,从request.POST中取
    myfiles = request.FILES.get('myfile')
    with open('img/%s' % (myfiles), 'wb') as f:
        for line in myfiles:
            f.write(line)
    return HttpResponse('上传成功')

视图层

通过Ajax提交json格式数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
<form  >
    <p>用户名:<input type="text" name="name" id="name"></p>
    <p>密码:<input type="password" name="pwd" id="pwd"></p>
</form>
<button id="btn">ajax提交json格式</button>
</body>
<script>
$('#btn').click(function () {
    var post_data={'user':$("#user").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',
                //dataType:'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>
</html>

html

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', --ajax这个方法调用这句完成 data=JSON.parse(data) 如果后台使用HttpResponse(json.dumps('ok'))到前台返回一个object对象，不使用就是返回字符串（前提是 json.dumps传的是字典等，如果传的是字符串不管怎么样都都是字符串）

JsonResponse(dic) jsonresponse内部是进行('content_type', 'application/json')编码返回前台，直接返回一个object对象如果是字典直接用例如data.name取值，
就不需要前台进行转换，前台写了dataType:'json',那么JsonResponse就不会内部进行转换了，还是返回一个object对象
ajax方法内写了datatype：‘json’ 的后台可以返回字符串的也可以返回contenttype指定json的