Ajax
AJAX（asynchronous Javascript And XML）
异步的JavaScript和XML
- 优点：
- AJAX使用JavaScript技术向服务器发送异步请求
- 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
- 因为服务器响应的内容不再是整个页面，而是页面中的部分内容，所以AJAx性能高
- 两个关键点：局部刷新，异步请求
案例
在前端页面上有三个输入框，实现前两个框内输入数字，朝后端发请求，在页面不刷新的情况下实现第三个框内为前两个数字的和
two_sum.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'bootstrap/js/jquery.js' %}"></script>
</head>
<body>
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<button id="s1">提交</button>
<script>
$('#s1').on('click', function(){
$.ajax({
url: '',
type: 'post',
data: {'t1': $('#t1').val(), 't2': $('#t2').val()},
success: function (data) {
$('#t3').val(data)
}
})
})
</script>
</body>
</html>
views.py
def two_sum(request):
if request.method == 'POST':
t1 = request.POST.get('t1')
t2 = request.POST.get('t2')
tsum = int(t1) + int(t2)
return HttpResponse(tsum)
return render(request, 'two_sum.html', locals())
AJAX传json格式数据
djang不会将前端传过来的json格式的数据解析，而是直接放到request.body中
json_bytes = request.body
json_str = json_bytes.decode('utf8')
json_dict = json.loads(json_str)
注意：
指定contentType参数
contentType:'application/json'
要发送的数据，确保是json格式
data: JSON.stringify({'username': 'qqqq', 'password': '123456'})
AJAX传文件
前端：需要利用内置对象Formdata，该对象既可以传普通的键值，也可以传文件
如何获取input获取用户上传文件的文件内容
- 先通过jquery找到该标签
- 将jquery对象转换成原生的js对象
- 利用原生js对象的方法，直接获取文件内容
<script>
$('#b1').on('click', function () {
// 生成formdata对象
var myFormData = new ForData();
// 向对象中添加普通键值
myFormData.append('username', $('#t1').val());
myFormData.append('password', $('#t2').val());
// 向对象中添加文件数据
myFormData.append('myfile', $('#t3')[0].files[0]);
$.ajax({
url: '',
type: 'post',
data: myFormData;
cententType:false, // 不用编码，默认使用formdata自带编码，django能够识别该对象
processData:false, // 浏览器对数据不做处理，直接发送
success: function (data) {
alert(data)
}
})
})
</script>
注意：
- 利用formdata对象，能够简单快速的传输数据，包括普通键值和文件
- ajax中参数设置：
- data: formdata对象
- contentType: false
- processData: false
contentType前后端传输数据编码格式
urlencode数据格式
form表单默认的提交数据的编码格式是urlencode数据格式
数据格式：username=admin&password=123
- django后端会将urlencode数据格式解析后打包给request.POST，用户从request.POST中获取数据
ajax默认的提交数据的格式也是urlencode
formdata数据格式
- django后端会将formdata格式的数据解析后打包给request.FILES，而不是request.POST
- 前后端交互数据格式的统一
- 前后端在做数据交互的时候，一定要表明所发的数据是什么格式
序列化组件
- 将用户表的数据查询出来，返回给前端
- 返回给前端的是一个字典，字典中是数据的字段
from django.core import serializers
def ser(request):
user_queryset = models.Userinfo.objects.all()
res = serializers.serialize('jason', user_queryset) # 序列化user_queryset, 格式为json
return render(request, 'ser.html', locals())