开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >python的jQuery-Ajax使用

python的jQuery-Ajax使用

原创

作者头像

陈不成i

修改于 2021-06-21 14:21:30

修改于 2021-06-21 14:21:30

1K0

举报

文章被收录于专栏：ops技术分享ops技术分享

from django.http import JsonResponse,HttpResponse
import json
def ax(request):
if request.method == 'GET':
return render(request,'ax.html')
if request.method == 'POST':
name = request.POST.get('name')
age = request.POST.get('age')
if name == 'admin' and age == '1':
# 处理完数据之后需要返回给前台一个状态码或数据
data = {}
data['code'] = 200
data['mes'] = '登录成功！'
# 把状态信息以json格式返回给前台
# 1.
# return JsonResponse(data)
# 2.
return HttpResponse(json.dumps(data))
else:
data = {}
data['code'] = 201
data['mes'] = '登录失败！'
return HttpResponse(json.dumps(data))

ax.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<script src="../static/jquery-1.10.2.min.js"></script>

<script src="../static/jquery.cookie.js"></script>
<title>Document</title>
</head>
<body>
昵称：<input type="text" id="name"><br>
年龄：<input type="text" id="age"><br>

<button onclick="sub()">登录</button>
</body>
<script>
// 定义sub方法
function sub(){
// var定义name等于id为name的标签的值,val获取标签的值
var name = $('#name').val()
var age = $('#age').val()
// console.log把数据打印在控制台
console.log(name)
console.log(age)
// 发起Ajax请求
$.ajax({
url:'/ax/', // 要提交到的网址或接口
data:{ // 要提交的数据
'csrfmiddlewaretoken': $.cookie('csrftoken'), // 防跨站请求伪造令牌
name:name,
age:age,
},
type:'POST', // 提交方式
success:function(res){ // 请求成功时，回调回台的返回结果
console.log(res)
var data = JSON.parse(res) // 解析前台返回数据
if (data.code==200){ // 如果返回码是200
alert('登录成功') // 弹窗提示登录成功
window.location.href='/con/' // 跳转到con接口
}
if (data.code==201){
alert('登录失败')
}
}
})
}
</script>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

评论

登录后参与评论

0 条评论

热度

最新