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