如何不知道什么是Ajax可以看這篇文章[《新手也能看懂，Ajax掃盲篇》]（http://www.reibang.com/p/b07b5b2171c9）

一 通過(guò)Ajax洛退，實(shí)現(xiàn)前端輸入兩個(gè)數(shù)字，服務(wù)器做加法吐根，返回到前端頁(yè)面

視圖層

def test_ajax(requests):
    n1=int(requests.POST.get('n1'))
    n2=int(requests.POST.get('n2'))
    return HttpResponse(n1+n2)

JS代碼

$("#submit").click(function () {
        $.ajax({
            url: '/test_ajax/',
            type: 'post',
            data: {
                n1: $("#num1").val(),
                n2: $("#num2").val()
            },
            success: function (data) {
                console.log(data)
                $("#sum").val(data)
            },

        })
    })

Html代碼

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum">
<button id="submit">計(jì)算</button>

二 基于Ajax進(jìn)行登錄驗(yàn)證

用戶在表單輸入用戶名與密碼，通過(guò)Ajax提交給服務(wù)器眼俊，服務(wù)器驗(yàn)證后返回響應(yīng)信息，客戶端通過(guò)響應(yīng)信息確定是否登錄成功，成功籽孙，則跳轉(zhuǎn)到首頁(yè)，否則火俄，在頁(yè)面上顯示相應(yīng)的錯(cuò)誤信息

視圖層

def auth(request):
    back_dic={'user':None,'message':None}
    name=request.POST.get('user')
    password=request.POST.get('password')
    print(name)
    print(password)
    user=models.user.objects.filter(name=name,password=password).first()
    print(user)
    # print(user.query)
    if user:
        back_dic['user']=user.name
        back_dic['message']='成功'
    else:
        back_dic['message']='用戶名或密碼錯(cuò)誤'
    import json
    return HttpResponse(json.dumps(back_dic))

JS代碼

$("#submit3").click(function () {
            $.ajax({
                url: '/auth/',
                type: 'post',
                data: {
                    'user': $("#id_name").val(),
                    'password': $('#id_password').val()
                },

                success: function (data) {
                    {#console.log(data)#}
                    var data=JSON.parse(data)
                    if (data.user){
                        location.
                    }else {
                        $(".error").html(data.message).css({'color':'red','margin-left':'20px'})
                    }
                }


            })
        }
    )

注意：traditional:true--->可以序列化一層列表犯建，多層不行，要轉(zhuǎn)成json格式上傳

Ajax提交json格式數(shù)據(jù)

$("#ajax_test").click(function () {
        var dic={'name':'lqz','age':18}
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json',  //一定要指定格式 contentType: 'application/json;charset=utf-8',
            data:JSON.stringify(dic),    //轉(zhuǎn)換成json字符串格式
            success:function (data) {
                console.log(data)
            }
        })
    })