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))      

轉載于:https://www.cnblogs.com/zhouhai007/p/10285175.html