Ajax
一.什么是Ajax
AJAX(Asynchronous Javascript And XML)，就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
二.基于jquery的Ajax简单实现
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
用户名: <input type="text" name="user" id="user"> <br>
密码: <input type="password" name="pwd" id="pwd"> <br>
<button>POST提交</button>
</form>
<button id="btn">Ajax提交</button>
</body>
<script src="/static/jquery/jquery-3.3.1.js"></script>
<script>
$('#btn').click(function () {
let user = $('#user').val();
let pwd = $('#pwd').val();
$.ajax({
url:'/test1/',
type:'get',
data:{'name':user,'pwd':pwd},
success:function (data) {
alert(data)
}
})
})
</script>
</html>
views.py
def test1(request):
user = request.GET.get('name')
pwd = request.GET.get('pwd')
if user == 'tom' and pwd == '123':
return HttpResponse('登录成功')
return HttpResponse('用户名或密码错误')
Ajax执行流程
根据ajax里面的url匹配到views.py文件里面的视图函数,然后发个请求(看type是什么请求),然后视图函数做一系列的处理,然后return给了ajax里面的data。因为是异步的,所以视图函数处理时不影响ajax后面的代码执行。一旦有数据return时,执行success内的函数代码。
三.案例
3.1 通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面
视图函数
def test_ajax(requests):
n1=int(requests.POST.get('n1'))
n2=int(requests.POST.get('n2'))
return HttpResponse(n1+n2)
html代码
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum">
<button id="submit">计算</button>
JS代码
$("#submit").click(function () {
$.ajax({
url: '/test_ajax/',
type: 'post',
data: {
n1: $("#num1").val(),
n2: $("#num2").val()
},
success: function (data) {
console.log(data)
$("#sum").val(data)
},
})
})
3.2 基于Ajax进行登录验证
视图函数
def auth(request):
back_dic={'user':None,'message':None}
name=request.POST.get('user')
password=request.POST.get('password')
print(name)
print(password)
user=models.user.objects.filter(name=name,password=password).first()
print(user)
# print(user.query)
if user:
back_dic['user']=user.name
back_dic['message']='成功'
else:
back_dic['message']='用户名或密码错误'
import json
return HttpResponse(json.dumps(back_dic))
JS代码
$("#submit3").click(function () {
$.ajax({
url: '/auth/',
type: 'post',
data: {
'user': $("#id_name").val(),
'password': $('#id_password').val()
},
success: function (data) {
{#console.log(data)#}
var data=JSON.parse(data)
if (data.user){
location.href='https://www.baidu.com'
}else {
$(".error").html(data.message).css({'color':'red','margin-left':'20px'})
}
}
})
}
)
四.基于Ajax提交json格式数据(简单版)
html+js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
用户名: <input type="text" name="user" id="user"> <br>
密码: <input type="password" name="pwd" id="pwd"> <br>
<button>POST提交</button>
</form>
<button id="btn">Ajax提交</button>
</body>
<script src="/static/jquery/jquery-3.3.1.js"></script>
<script>
$('#btn').click(function () {
let user = $('#user').val();
let pwd = $('#pwd').val();
let s = JSON.stringify({'name':user,'pwd':pwd}); //json格式字符串
let t = JSON.parse(s); //反转回来
$.ajax({
url:'/test3/',
type:'post',
contentType:'application/json', //默认是urlencoded
data:s,
dataType:'json', //响应回来解析的方式
success:function (data) {
alert(data)
}
})
})
</script>
</html>
视图函数
def test3(request):
if request.method == 'POST':
#只处理了urlencoding编码的参数:name='tom'&pwd='123'
# 前端提交的json格式数据,需要自己处理
# 提交到服务器的数据都在 request.body 里，取出来自行处理
print(request.body)
import json
res = request.body.decode('utf-8')
res_dic = json.loads(res)
print('res_dic===>',res_dic)
if res_dic['name'] == 'tom' and res_dic['pwd'] == '123':
return HttpResponse('登录成功')
return HttpResponse('用户名密码错误')
五,基于Ajax简单上传文件
html+js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
用户名: <input type="text" name="user" id="user"> <br>
密码: <input type="password" name="pwd" id="pwd"> <br>
文件: <input type="file" name="myfile" id="myfile"> <br>
<button>提交</button>
</form>
<button id="btn">ajax提交</button>
</body>
<script src="/static/jquery/jquery-3.3.1.js"></script>
<script>
$('#btn').click(function () {
let formdata = new FormData(); //生成一个Formdata对象
formdata.append('myfile',$('#myfile')[0].files[0]);
formdata.append('name',$('#user').val());
formdata.append('pwd',$('#pwd').val());
$.ajax({
url:'/test4/',
type:'post',
contentType:false, //告诉jQuery不要去处理发送的数据
processData:false, // 告诉jQuery不要去设置Content-Type请求头
data:formdata,
success:function (data) {
alert(data)
}
})
})
</script>
</html>
视图函数
def test4(request):
if request.method == 'POST':
name = request.POST.get('name')
pwd = request.POST.get('pwd')
file = request.FILES.get('myfile')
file_name = file.name
with open(file_name,'wb') as f:
for line in file:
f.write(line)
return HttpResponse('ok')