特点:
? ? ? ? 异步提交
? ? ? ? 局部刷新
例子:github注册
动态获取用户名实时的跟后端确认并实时的展示到前端(局部刷新)?
朝后端发送请求的方式
? ? ? ? 1.浏览器地址栏直接输入url回车 -----》get请求
? ? ? ? 2.a标签的href属性 ?-----》get请求
? ? ? ? 3.form表单 -----》get请求、post请求
? ? ? ? 4.ajax -----》 get请求、post请求
真正的ajax原生,需要使用js操作,jq的ajax方法是对原生js的封装,方便咱们使用
(其他框架也可以,原理是一样的)
前后端混合项目中,我们通常使用jq的ajax实现 js和后端异步交互
? ? ? ? jq操作dom
? ? ? ? jq发ajax请求
前后端分离项目中,我们会使用另一个第三方库,实现 js和后端异步交互(axios)
?
写一个例子:
页面上有三个input框,前两个框输入数字,点击提交,朝后端发送ajax请求,后端计算出结果再返回给前端,动态展示到第三个input框中,整个页面不能刷新,也不能在前端计算
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<button id="btn">提交</button>
<script>
// 先给按钮一个点击事件
$('#btn').click(function (){
// 朝后端发送ajax请求
$.ajax({
// 1.指定朝哪个后端发送ajax请求
url:'', // 不写就是朝当前地址提交
// 2.请求方式
type:'post', // 不指定就是get,都是小写
// 3.数据
data:{'l1':$('#d1').val(),'l2':$('#d2').val()},
// 4.回调函数:当后端给你返回结果的时候会自动触发 args接收后端返回的结果
success:function (args) {
$('#d3').val(args)
}
})
})
</script>
</body>
</html>
views代码
from django.shortcuts import render,HttpResponse
def ab_ajax(request):
if request.method=='POST':
l1 = request.POST.get('l1')
l2 = request.POST.get('l2')
#先转成整型再加
l3=int(l1)+int(l2)
return HttpResponse(l3)
return render(request,'ajax.html')
前后端传输数据的编码格式(contentType)
因为get请求数据就是直接放在url后面的(url?user=kk$pwd=123),所以主要看下post请求的编码格式
向后端发送post请求的方式
? ? ? ? 1.form表单
? ? ? ? 2.ajax请求
前后端传输数据的编码格式
? ? ? ? urlencoded
? ? ? ? formdata
? ? ? ? json
? ? ? ? form表单
默认的编码格式是urlencoded
数据格式:user=kk&pwd=123 ? ? ? ?
Django后端针对符合urlencoded编码格式的数据会自动帮你解析封装到request.POST中?
user=kk&pwd=123 ? ? --------》 ? request.POST
如果把编码格式改成formdata,那么针对普通的键值对还是解析到request.POST中, 而将文件解析到request.FILES中
form表单是没办法发送json格式数据的?
ajax默认的编码格式是urlencoded
ajax发送json格式数据
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="d1">点我</button>
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'kk','age':12}),
contentType:'application/json', //指定编码格式
success:function () {
}
})
})
</script>
</body>
</html>
views代码
import json
from django.shortcuts import render
def login(request):
return render(request,'login.html')
def ab_json(request):
#针对json格式的数据需要自己手动处理
if request.is_ajax(): #判断是不是ajax的请求
json_bytes=request.body #拿到一个字符串类型
json_dict=json.loads(json_bytes) #传入的二进制的数据会内部自动解码再反序列化
print(json_dict)
return render(request,'ab_json.html')
ajax发送json格式数据需要注意点
? ? ? ? 1.contentType参数指定成:applicaton/json
? ? ? ? 2.数据是真正的json格式数据
? ? ? ? 3.Django后端不会帮你处理json格式数据,需要你自己去request.body获取并处理
1.? ajax发送文件需要借助于js内置对象FormData
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>username<input type="text" id="d1"></p>
<p>password<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button id="d4">点我</button>
<script>
//点击按钮朝后端发送普通键值对和文件数据
$('#d4').on('click',function () {
//需要先利用FormData内置对象
let formDataObj=new FormData();
//2 添加普通的键值对
formDataObj.append('username',$('#d1').val());
formDataObj.append('password',$('#d2').val());
//3添加文件对象
formDataObj.append('myfile',$('#d3')[0].file[0]);
//4将对象基于发送给后端
$.ajax({
url:'',
type:'post',
data:formDataObj, //直接将对象放在data后面即可
//ajax发送文件必须指定两个参数
contentType:false, //不需使用任何编码,Django后端都能自动识别formdata对象
processData: false, //告诉你的浏览器不要对你的数据进行任何处理
success:function () {
}
})
})
</script>
</body>
</html>
2. ?ajax发送文件必须指定两个参数:
? ? ? ? ? ? contentType:false, ?//不需使用任何编码,Django后端都能自动识别formdata对象
? ? ? ? ? ? processData: false, ?//告诉你的浏览器不要对你的数据进行任何处理
3. ?Django后端能够直接识别formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中,文件数据自动解析并封装到request.FILES中