Python学习之路—2018/7/2
1.Ajax
Ajax简介
向浏览器发送请求的途径有：
- 浏览器地址栏，默认为get请求
- a标签，默认为get请求
- form表单：get请求和post请求
- Ajax：get请求和post请求（特点：异步交互，局部刷新）
Ajax（Asynchronous JavaScript and XML ）是异步的JavaScript与XML技术，使用Javascript语言与服务器进行异步交互
基于JQuery简单Ajax实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello World</h1>
<button class="ajax">Ajax</button>
<p class="content"></p>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="result"><button class="cal">提交</button>
</br>
</br>
<form>
用户名<input type="text" id="user">
密码<input type="password" id="pwd">
<button class="sub" type="button">提交</button>
<span class="error"></span>
</form>
</body>
<script src="/static/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".ajax").click(function () {
$.ajax(
{
url:"/handle_ajax/", // 请求url
type:"get", // 请求方式
success:function (data) { // 回调函数
console.log("hello");
$(".content").html(data)
}
}
)
});
// 计算
$(".cal").click(function () {
$.ajax({
url:"/cal",
type:"get",
data:{
"num1":$("#num1").val(),
"num2":$("#num2").val()
},
success:function (data) {
$("#result").val(data)
}
})
});
// 登录验证
$(".sub").click(function () {
$.ajax({
url:"/login/",
type:"post",
data:{
"user":$("#user").val(),
"pwd":$("#pwd").val()
},
success:function (data) {
var status = JSON.parse(data); // 反序列化
console.log(status);
if (status["user"]){
location.href = "http://www.baidu.com"
}
else {
$(".error").html(status["msg"]).css({"color": "red", "margin-left": "20px"})
}
}
})
})
</script>
</html>views.py
def index(request):
return render(request, "index.html")
def handle_ajax(request):
return HttpResponse("hello") # 对应回调函数的data
def cal(request): # 计算
num1 = int(request.GET.get("num1"))
num2 = int(request.GET.get("num2"))
result = num1 + num2
return HttpResponse(result)
def login(request): # 登录验证
import json
user = request.POST.get("user")
pwd = request.POST.get("pwd")
status = {"user": None, "msg": None}
if user == "gyq" and pwd == "123":
status = {"user": user, "msg": "登陆成功"}
else:
status["msg"] = "用户名或者密码错误!"
return HttpResponse(json.dumps(status)) # 将字典序列化成json数据再返回展示效果：
简单流程：
- 将ajax请求发送给路径handle_ajax
- handle_ajax视图函数结果响应给data
- 执行回调函数
文件上传
基于form表单的文件上传
file_upload.html
<form action="" method="post">
用户名<input type="text" name="username">
头像<input type="file" name="avatar">
<input type="submit">
</form>此时头像并没有上传成功，在视图层中调用request.POST并不会得到文件，而只是得到文件的名字
需要给form表单设置enctype属性（默认为application/x-www-form-urlencoded）为multipart/form-data
<form action="" method="post" enctype="multipart/form-data">
...
</form>在视图层中通过调用request.FILES得到文件，并通过文件操作将文件保存到本地。
当内容类型为urlencoded时，适合用request.POST取得数据，当内容类型为form-data（可以获得上传的文件）时，适合用request.FILES取得数据
views.py
def file(request):
if request.method == "GET":
return render(request, "file_upload.html")
else:
avatar = request.FILES.get("avatar")
with open(avatar.name, "wb") as f:
for l in avatar:
f.write(l)
return HttpResponse("OK")基于Ajax的文件上传
file_upload.html
<form>
用户名<input type="text" id="username">
头像<input type="file" id="avatar">
<input type="button" class="sub" value="提交">
</form>
<script type="text/javascript">
$(".sub").click(function () {
var formdata = new FormData(); // 实例化formdata
formdata.append("user", $("#username").val());
formdata.append("avatar", $("#avatar")[0].files[0]); // 获取上传的文件
$.ajax({
url:"/file/",
type:"post",
data:formdata,
contentType:false, // 不设置内容类型
processData:false, // 不做预处理
success:function (data) {
console.log(data)
}
})
})
</script>