目录
一、AJAX(重要)
Ajax（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax是一门js的技术，基于原生js开发的，但是用原生的js写代码过于繁琐，因此在这里我们只通过jQuery实现
1.1 特性
-
异步提交
同步异步：描述的任务的提交方式
同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制 阻塞非阻塞：程序的运行状态
程序运行的三状态图
-
局部刷新
一个页面 不是整体刷新 而是页面的某个地方局部刷新
1.2 基本使用
注意：单独的AJAX当然看不出来任何效果，因此他需要和后端一起来说。
例子：展示一个前端页面，页面上有三个输入框，前两个框输入数字，点击按钮朝后端发请求，页面不刷新的情况下，完成数字的加法运算 。
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
<button id="b1">计算</button>
</p>
<script>
// 绑定点击事件
$("#b1").on("click",function () {
// 绑定ajax事件，向后端发请求
$.ajax({
// 1.向哪个地址发请求
url:"",// 专门用来控制朝后端提交数据的地址 不写默认就是朝当前地址提交
// 2.发送什么类型的请求
type:"post",
// 3.要发送什么数据
data:{"t1":$("#t1").val(),"t2":$("#t2").val(),"t3":$("#t3").val(),},
// 4.异步提交的任务 需要通过回调函数来处理
success:function (data) { // data形参指代的就是异步提交的返回结果
// 通过DOM操作将内容 渲染到标签内容上
$('#t3').val(data)
}
})
})
</script>
'''AJAX前后端交互'''
def ajax(request):
# 判断是否是ajax请求,布尔值
if request.is_ajax():
if request.method == "POST":
'''
如果请求文本的数据格式是：urlencoded
Django就会将解析到的数据放到request.POST中
'''
print(request.POST)
t1 = request.POST.get('t1')
t2 = request.POST.get('t2')
res = int(t1) + int(t2)
return HttpResponse(res)
return render(request,"ajax.html")
1.3 Ajax传json格式数据
django后端针对json格式的数据不会自动帮你解析，会直接原封不动的给你放到request.body中。
JavaScript中关于JSON对象和字符串转换的两个方法：
- JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
- JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
<button id="b1">计算</button>
</p>
<script>
// 绑定点击事件
$("#b1").on("click",function () {
// 绑定ajax事件，向后端发请求
$.ajax({
// 1.向哪个地址发请求
url:"",// 专门用来控制朝后端提交数据的地址 不写默认就是朝当前地址提交
// 2.发送什么类型的请求
type:"post",
// 设置文本数据格式类型，默认是urlencoded
contentType:'application/json', // 设置数据格式为json
// 3.要发送什么数据
{#data:{"t1":$("#t1").val(),"t2":$("#t2").val(),"t3":$("#t3").val(),},#} // 普通格式数据
// json格式数据
data: JSON.stringify({"t1":$("#t1").val(),"t2":$("#t2").val(),"t3":$("#t3").val(),}),
// 4.异步提交的任务 需要通过回调函数来处理
success:function (data) { // data形参指代的就是异步提交的返回结果
// 通过DOM操作将内容 渲染到标签内容上
$('#t3').val(data)
}
})
})
</script>
'''AJAX前后端交互'''
def ajax(request):
# 判断是否是ajax请求,布尔值
if request.is_ajax():
if request.method == "POST":
'''
如果请求文本的数据格式是：json
Django不会解析，会直接原封不动的放到 request.body
需要你自己去反序列化
'''
print(request.POST) # 空
print(request.body) # byte类型数据
# 序列化request.body得到字典
data_json = json.loads(request.body) # 字典
t1 = data_json.get('t1')
t2 = data_json.get('t2')
res = int(t1) + int(t2)
return HttpResponse(res)
return render(request,"ajax.html")
注意点
1.指定contentType参数
contentType:'application/json',
2.要将你发送的数据 确保是json格式的
data:JSON.stringify({'username':'jason','password':'123'})
1.4 AJAX传文件
- 需要利用内置对象 Formdata提交文件，该对象既可以传普通的键值 也可以传文件
- ajax传文件 一定要指定两个关键性的参数
- contentType:false,
- processData:false,
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>
<script>
$("#b1").on("click",function () {
// 1.实例化FormData对象
var myFormData = new FormData();
// 2.朝对象中添加普通的键值
myFormData.append('username',$("#t1").val()); // 必须是 key value
myFormData.append('password',$("#t2").val()); // 必须是 key value
// 3.朝对象中添加文件数据
// 1.先找到该标签
// 2.转换成js对象
// 3.通过js对象的方法 files ，获取文件内容 [0]
myFormData.append("myfile",$("#t3")[0].files[0]); // 必须是key value
$.ajax({
url:"",
type:"post",
// 数据，一定放对象
data:myFormData,
// ajax传文件 一定要指定两个关键性的参数
contentType:false, // 不用任何编码 因为FormData对象自带编码
processData:false, // 告诉浏览器不要处理我的数据 直接发就行
// 回调函数,data是接收的参数
success:function (data) {
alert(data)
}
})
})
</script>
'''AJAX传文件'''
def ajax_file(request):
# 判断是否是ajax请求,布尔值
if request.is_ajax():
if request.method == "POST":
print(request.POST) # 这里还是正常传递过来的数据
print(request.FILES) # 但是这里就是一个文件对象
user = request.POST.get("username")
pwd = request.POST.get("password")
myfile = request.POST.get("myfile")
print(user,pwd,myfile)
return HttpResponse('收到啦')
return render(request,"ajax_file.html")
ajax传文件需要注意的事项
1.利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)
2.有几个参数主要注意
data:FormData对象
contentType:false
processData:false
二、contentType前后端传输数据编码格式
form表单 默认的提交数据的编码格式是urlencoded
-
urlencoded
username=admin&password=123这种就是符合urlencoded数据格式 django后端针对username=admin&password=123的urlencoded数据格式会自动解析 将结果打包给request.POST 用户只需要从request.POST即可获取对应信息 -
formdata
django后端针对formdata格式类型数据 也会自动解析 但是不会放到request.POST中而是给你放到了request.FILES中
ajax默认的提交数据的编码格式也是urlencoded
总结
django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法
前后端在做数据交互的时候，一定一定要表明你所发的的数据到底是什么格式。
你的数据是什么格式 你就应该准确无误告诉别人是什么格式，你不能骗人家
三、ajax + sweetalert
<script>
$("#submit").on("click",function () {
$.ajax({
url:"",
type:"post",
data:{"user":$("#login_btn").val(),"pwd":$("#pwd_btn").val(),},
success:function (data) {
if (data.code==1000){
swal(data.msg, "", "success");
}else{
swal(data.msg, "", "error");
}
}
})
});
</script>
'''登陆校验'''
if userobj:
if userobj.password == pwd:
user_info["user"] = user
'''ajax + sweetalert'''
back_dic['code'] = 1000
back_dic['msg'] = '登陆成功'
return JsonResponse(back_dic)
else:
'''ajax + sweetalert'''
back_dic['code'] = 2000
back_dic['msg'] = '账号或密码错误'
return JsonResponse(back_dic)
else:
'''ajax + sweetalert'''
back_dic['code'] = 2000
back_dic['msg'] = '用户不存在'
return JsonResponse(back_dic)