什么是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))