什么是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))ajax的json格式数据
原文地址：https://www.cnblogs.com/zhouhai007/p/10285175.html