文章目录
Ajax
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！
-
优点：
- AJAX使用Javascript技术向服务器发送 异步请求
- AJAX无须刷新整个页面,而是页面 局部刷新
jQuery实现Ajax
- 模板文件
test.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
<p><input type="text" class="user" placeholder="用户名"></p>
<p><input type="password" placeholder="密码" class="pwd"></p>
<button id="ajaxTest">AJAX 测试</button>
<button id="btn1">按钮1</button>
<script src="/static/js/jquery.js"></script>
<script>
$("#btn1").click(function () {
$.ajax({
url: "/test_sleep/",
type: "get",
success: function (res) {
console.log(res)
}
})
});
$("#ajaxTest").click(function () {
var username = $(".user").val();
var password = $(".pwd").val();
console.log(username, password);
$.ajax({
url: "/test/",
type: "POST",
data: {
csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
user: username,
pwd: password,
},
success: function (res) {
{#alert("hahaha")#}
if (res == "ok"){
alert("okla")
}else{
alert("buok.")
}
}
})
})
</script>
</body>
</html>
- 视图文件
views.py：
def test(request):
# if request.method == "GET":
if request.is_ajax():
username = request.POST.get("user")
password = request.POST.get("pwd")
print(username, password)
return HttpResponse("okddd")
return render(request, "test.html")
def test1(request):
import time
time.sleep(5)
return HttpResponse("sleep...")
Ajax请求流程图:
ajax请求的格式
$.ajax({
url: "发送请求的url",
type: "请求方式",
data: {
key:val,
},
success: function(res){
...
}
})
计算案例(包含后端返回json数据)
- 模板文件
add_test.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>计算案例</h3>
{% csrf_token %}
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="btn1">计算</button>
<span id="err"></span>
<script src="/static/js/jquery.js"></script>
<script>
$("#btn1").click(function () {
var i1 = $("#i1").val();
var i2 = $("#i2").val();
$.ajax({
url: "/add_test/",
type: "post",
data: {
csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
i1: i1,
i2: i2,
},
success: function (ret) {
{#var ret = JSON.parse(ret);// 反序列化#}
console.log(ret.status, typeof ret);
if (ret.status){
$("#i3").val(ret.msg);
}else{
$("#err").text(ret.msg);
setTimeout(function () {
$("#err").text("");
},3000)
}
}
})
})
</script>
</body>
</html>
- 视图文件
views.py
from django.shortcuts import render, HttpResponse
import json
from django.http import JsonResponse
def add_test(request):
if request.is_ajax():
ret = {"status": 1, "msg": None}
num1 = request.POST.get("i1")
num2 = request.POST.get("i2")
try:
res = int(num1) + int(num2)
ret['msg'] = res
except ValueError as e:
ret['status'] = 0
ret['msg'] = "请核对输入的数据合法性。"
# return HttpResponse(json.dumps(ret))
return JsonResponse(ret)
return render(request, "add_test.html")
基于Ajax上传json数据
- 模板文件
json_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>json数据</h3>
{% csrf_token %}
<p><input type="text" class="user" placeholder="用户名"></p>
<p><input type="password" placeholder="密码" class="pwd"></p>
<button id="ajaxTest">AJAX_json 测试</button>
<script src="/static/js/jquery.js"></script>
<script>
$("#ajaxTest").click(function () {
var user = $(".user").val();
var pwd = $('.pwd').val();
$.ajax({
url: "",
type: 'POST',
contentType: "json",
headers: {"X-CSRFToken": $("input[name='csrfmiddlewaretoken']").val()}, // 在请求头中添加csrf
data: JSON.stringify({
user: user,
pwd: pwd,
{#csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),#}
}),
success: function (ret) {
console.log(ret)
}
})
})
</script>
</body>
</html>
- 视图文件
views.py
def json_test(request):
if request.is_ajax():
print(request.POST) # json时，post为空
print(request.body) # b'{"user":"alex","pwd":"123"}'
data_str = request.body.decode()
data = json.loads(data_str)
# data['user1'] # day7 字典操作
# print(data.get('user1'), type(data))
print(data, type(data))
return HttpResponse("ok")
return render(request, "json_test.html")
json数据相关
- 后端返回json数据
后端: (HttpResponse返回)
return HttpResponse(json.dumps(ret)) # 借助json模块,进行序列化
前端:
var ret = JSON.parse(ret);// 反序列化
ret.status // 获取后端返回的状态码
后端: (JsonResponse返回)
return JsonResponse(ret)
前端:
直接使用ret即可(ret就是一个字典)
- 前端上传json数据
前端:
$.ajax({
url: "", # 默认往当前url提交
type: "post", #请求方式
contentType: "json",
headers: {"X-CSRFToken": $("input[name='csrfmiddlewaretoken']").val()}, // 在请求头中添加csrf
data: JSON.stringify({
key1: val1,
key2: val2,
...
},
success: function(ret){
console.log(ret)
}
})
后端:
request.POST # 为空
request.body # b'{"user":"alex","pwd":"123"}'
1. 转换成字符串
2. 反序列化 # dict1 = json.loads(request.body.decode())
基于form表单上传文件
- 模板文件
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>文件上传</h3>
<form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="fi_name1">
<input type="submit">
</form>
</body>
</html>
- 视图文件
views.py
def upload(request):
if request.method == "GET":
return render(request, "upload.html")
else:
print(request.POST)
# print(type(request.POST.get("fi_name1"))) #<class 'str'> 没有意义
# print(request.body) # enctype="multipart/form-data" ,会报错
print(request.FILES)
print(request.FILES.get('fi_name1'))
print(type(request.FILES.get('fi_name1')))
file_obj = request.FILES.get('fi_name1')
print(file_obj.name)
with open(os.path.join("media", file_obj.name), "wb") as f:
for i in file_obj:
f.write(i)
return HttpResponse("ok")
基于Ajax请求上传文件
- 模板文件
upload_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>文件上传ajax</h3>
{% csrf_token %}
<input type="file" id="file_id">
<input type="button" id="btn1" value="上传">
<script src="/static/js/jquery.js"></script>
<script>
$("#btn1").click(function () {
let formdata = new FormData(); // FormData对象
formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
formdata.append("fi_name1", $("#file_id")[0].files[0]);
$.ajax({
url: "",
type: "POST",
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
data: formdata,
success: function (ret) {
console.log(ret)
}
})
})
</script>
</body>
</html>
- 视图文件
views.py
def upload_ajax(request):
if request.method == "GET":
return render(request, "upload_ajax.html")
else:
print(request.POST)
# print(type(request.POST.get("fi_name1"))) #<class 'str'> 没有意义
# print(request.body) # enctype="multipart/form-data" ,会报错
print(request.FILES)
print(request.FILES.get('fi_name1'))
print(type(request.FILES.get('fi_name1')))
file_obj = request.FILES.get('fi_name1')
print(file_obj.name)
with open(os.path.join("media", file_obj.name), "wb") as f:
for i in file_obj:
f.write(i)
return HttpResponse("ok")
请求头ContentType
-
默认按照
application/x-www-form-urlencoded
request.POST有值
request.body有值
request.FILES没有值 -
设置为
multipart/form-data(表单上传文件,一定要指定该类型, 一定要name值)
request.POST有值
request.body报错
request.FILES有值 -
设置为
application/json
request.POST没有值
request.body有值
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
