ajax的json格式數據

什么是Ajax:

         通過js語言跟后台進行交互的一個東西

                   -特點:異步,局部刷新

                  

                   ajax往后台提交數據

                   $.ajax({

                            url:'請求的地址',

                            type:'get/post',

                            data:{key:value,key2:value2},

                            success:function(data){

                                     alert(data)

                            }

                   })

                           

        

         1 后台返回json格式

         2 問？返回render，返回redirect？

        

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

        

         總結:

                   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才會給我處理

 前段:
 $('.btn').click(function () {
         data1={name:$('.name').val(),pwd:$('.pwd').val()};
        $.ajax({

            url:'/login/',
            type:'post',
            contentType:'application/json',
            data:JSON.stringify(data1),
            {#data:data1,#}
            success:function (data) {
                $('.p1').text(data.msg)
            }
        })
    })

 

后台:
def login(request):
#     if request.method == 'GET':
#         return render(request, 'login.html')
      if request.method == 'POST':
#         print(request.POST)
#         print(request.body)
#         data = request.body.decode('utf-8')
#         data = json.loads(data)
#         print(type(data))
#         # name=data.get('name')
#         # pwd=data.get('pwd')
#         name = data['name']
#         pwd = data['pwd']
#         user = models.User.objects.filter(name=name, 
#            pwd=pwd).first()
#
#         if user:
#             dic = {'msg': '登陸成功'}
#             return JsonResponse(dic)
#         else:
#             dic = {'msg': '登錄失敗'}
#             return JsonResponse(dic)

 

 

前段: 
$('#submit').click(function () {
    $.ajax({
        url:'/login/',
        type:'post',
        data:{name1:$("#name").val(),pwd2:$("#pwd").val()},
        success:function (data) {
            //后台用JsonResponse返回數據
            //data 就會被轉成字典
            console.log(data)
            console.log(typeof data)
            //JSON.parse(data) 把字符串類型轉成字典
            data=JSON.parse(data)
            {#JSON.stringify()#}
            console.log(typeof dat1)
            if(data.status == 100){
                //成功,跳轉到指定頁面
                //location.href=地址,前端就會跳轉到指定的url
                alert(data.msg)
                //$("#error").text(data.msg+'正在跳轉')
                //location.href=data.url
            }else{
                $("#error").text(data.msg)
            }
        }
    })
})

 

 

def login(request):
    dic={'status':100,'msg':None}
    if request.method == 'GET':
        return render(request, 'login.html')
    # if request.is_ajax():
    if request.method=='POST':
        name=request.POST.get('name1')
        pwd=request.POST.get('pwd2')
        if name=='lqz' and pwd=='123':
            dic['msg'] = '登陸成功'
            # 想讓前端跳轉
            # dic['url']='http://www.baidu.com'
            dic['url']='/test/'
        else:
            # 返回json格式字符串
            dic['status']=101
            dic['msg']='用戶名或密碼錯誤'
        # return JsonResponse(dic)
        return HttpResponse(json.dumps(dic))