AJAX(asynchronous Javascript And XML)
异步的JavaScript和XML
在前端页面上有三个输入框,实现前两个框内输入数字,朝后端发请求,在页面不刷新的情况下实现第三个框内为前两个数字的和
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())
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‘})
前端:需要利用内置对象Formdata,该对象既可以传普通的键值,也可以传文件
如何获取input获取用户上传文件的文件内容
<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>
注意:
urlencode数据格式
form表单默认的提交数据的编码格式是urlencode数据格式
数据格式:username=admin&password=123
ajax默认的提交数据的格式也是urlencode
formdata数据格式
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())
原文:https://www.cnblogs.com/zj420255586/p/11755599.html