Python-Django-Ajax

 什麼是Ajax:

經過js語言跟後臺進行交互的一個東西
-特色:異步,局部刷新

ajax日後臺提交數據
$.ajax({
url:'請求的地址',
type:'get/post',
data:{key:value,key2:value2},
success:function(data){
alert(data)
}
})


1 後臺返回json格式
2 問？返回render，返回redirect？

基於ajax寫一個登錄功能，一旦登錄成功，跳轉到百度，登錄失敗，在頁面顯示用戶名或密碼

 

 初識ajax

<h2>點我發數據</h2>
<button id="btn">點我發數據</button>
<span id="sp"></span>
<p>
    <button id="btn2">diandiandd</button>
</p>

('#btn').click(function () {
    $.ajax({
        'url': '/TEXT/',
        'type': 'get',
        success: function (data) {
            console.log(data)
            $('#sp').text(data)

        }
    })
})
$('#btn2').click(function () {
    alert(2323232)
})

# ajax初識
def ajax(request):
    if request.method == 'GET':
        return render(request, 'ajax.html')


def text(request):
    if request.method == 'GET':
        import time
        time.sleep(5)
        return HttpResponse('HELLO WORLD')

ajax計算

<h2>ajax計算</h2>
<input type="text" id="first">+<input type="text" id="second">=<input type="text" id="sum">
<button id="btn3">calculate</button>

def sum1(request):
    print(request.body)
    print(request.GET)
    first = request.POST.get('first')
    second = request.POST.get('second')
    ret = int(first) + int(second)
    return HttpResponse(ret)

$('#btn3').click(function () {
    {#        var first=('#first').value()#}
    {#        var second=('#second').value()#}
    {#        var sum=first+second#}
    $.ajax({
        url: '/sum/?aa=1313',
        type: 'post',
        data: {first: $('#first').val(), second: $('#second').val()},
        success: function (data) {
            $('#sum').val(data)
        }
    })
})

裝飾器

# 裝飾器
import json
def json_format(func):
    def inner(request, *args, **kwargs):
        # 是爲了防止報錯,主要是處理urlencode這種編碼,這種編碼應該不處理
        try:
            # name=lqz&pwd=123
            request.POST = json.loads(request.body)
        except Exception as e:
            print(e)
        res = func(request, *args, **kwargs)
        return res
    return inner

ajax登陸

<h2>基於ajax登陸</h2>
<p>user <input type="text" id="user"></p>
<p>pwd <input type="text" id="pwd"></p>
<button id="submit">submit</button>

# ajax登陸
@json_format
def loginjson(request):
    dic = {'status': 100, 'msg': None}
    if request.method == 'GET':
        return render(request, 'ajax.html')
    if request.is_ajax():
        print(request.POST)
        print(request.GET)
        print(request.body)
        # loads能夠直接傳二進制
        # request_dic=json.loads(request.body)
        # request.POST=request_dic
        # print(type(request_dic))
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        print(user, pwd)
        return HttpResponse('ok')

$('#submit').click(function () {
    postdata = {user: $("#user").val(), pwd: $("#pwd").val()}
    $.ajax({
        url: '/loginjson/',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(postdata),
        success: function (data) {
            console.log(data)
            alert('ok')
            {#                data = JSON.parse(data)#}
            {#                if (data.status == 100) {#}
            {#                    alert(data.msg)#}
            {#                } else {#}
            {#                    $('#error').text(data.msg)#}
        }
    })
})

總結:

 

總結:
1 後端若是返回JsonResponse,前端的ajax內部會自動將json格式字符串轉換成字典
2 後端若是返回HttpResponse,前端的ajax內部不會給你自動轉換,拿到的data是字符串類型,須要手動JSON.parse(data)來轉成字典

3 字符串轉字典:JSON.parse(data)
字典轉字符串:aa=JSON.stringify(字典對象)
4 若是前端傳的格式是json格式,django不會處理body中的內容,須要本身處理
只有前端傳的格式是urlencoded,form-data格式,django纔會給我處理

urlencoded: name=lqz&pwd=123