Django Ajax

時間 2019-12-09

標籤 django ajax 欄目 Python 简体版

原文原文鏈接

Ajax

AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML,如今更多使用json數據）。javascript

　　同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；html

　　異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。前端

AJAX除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）java

優勢：python

　　1.AJAX使用Javascript技術向服務器發送異步請求jquery

　　2.AJAX無須刷新整個頁面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傳的是字典等，若是傳的是字符串無論怎麼樣都都是字符串）json

JsonResponse(dic) jsonresponse內部是進行('content_type', 'application/json')編碼返回前臺，直接返回一個object對象若是是字典直接用例如data.name取值，
就不須要前臺進行轉換，前臺寫了dataType:'json',那麼JsonResponse就不會內部進行轉換了，仍是返回一個object對象
ajax方法內寫了datatype：‘json’ 的後臺能夠返回字符串的也能夠返回contenttype指定json的
瀏覽器

相關標籤/搜索

django+ansible+ajax

django+jquery+ajax+post

python3+pycharm+django+django

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。