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