python--簡單的jQuery-Ajax使用

時間 2019-11-30

標籤 python 簡單 jquery ajax 使用欄目 Python 简体版

原文原文鏈接

首先是接口代碼：html

    from django.http import JsonResponse,HttpResponse
    import json
    def ax(request):
        if request.method == 'GET':
            return render(request,'ax.html')
        if request.method == 'POST':
            name = request.POST.get('name')
            age = request.POST.get('age')
            if name == 'admin' and age == '1':
                # 處理完數據以後須要返回給前臺一個狀態碼或數據
                data = {}
                data['code'] = 200
                data['mes'] = '登陸成功！'
                # 把狀態信息以json格式返回給前臺
                # 1.
                # return JsonResponse(data)
                # 2.
                return HttpResponse(json.dumps(data))
            else:
                data = {}
                data['code'] = 201
                data['mes'] = '登陸失敗！'
                return HttpResponse(json.dumps(data))

而後是前臺的html模板中的代碼：jquery

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 導入jquery文件 -->
        <script src="../static/jquery-1.10.2.min.js"></script>
        <!-- 導入jquery.cookie -->
        <script src="../static/jquery.cookie.js"></script>
        <title>Document</title>
    </head>
    <body>
        暱稱：<input type="text" id="name"><br>
        年齡：<input type="text" id="age"><br>
        <!-- onclick,點擊按鈕時觸發sub方法 -->
        <button onclick="sub()">登陸</button>
    </body>
    <script>
        // 定義sub方法
        function sub(){
            // var定義name等於id爲name的標籤的值,val獲取標籤的值
            var name = $('#name').val()
            var age = $('#age').val()
            // console.log把數據打印在控制檯
            console.log(name)
            console.log(age)
            // 發起Ajax請求
            $.ajax({
                url:'/ax/', // 要提交到的網址或接口
                data:{ // 要提交的數據
                    'csrfmiddlewaretoken': $.cookie('csrftoken'), // 防跨站請求僞造令牌
                    name:name,
                    age:age,
                },
                type:'POST', // 提交方式
                success:function(res){ // 請求成功時，回調回臺的返回結果
                    console.log(res)
                    var data = JSON.parse(res) // 解析前臺返回數據
                    if (data.code==200){ // 若是返回碼是200
                        alert('登陸成功') // 彈窗提示登陸成功
                        window.location.href='/con/' // 跳轉到con接口
                    }
                    if (data.code==201){
                        alert('登陸失敗')
                    }
                }
            })
        }
    </script>
    </html>