Ajax
Ajax基本操作
1.Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面
2.基础语法
<script>
$.ajax({
url:'', // 朝那个地址发送数据,等价于form表单action
type:'post', // 提交数据的方式,等价于method参数(默认get请求)
data:{}, // 发送给后端的数据的数据
success:function (形参) {
异步回调函数
}
})
</script>
3.例子
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
<script>
$('#d2').blur(function (){
// 使用ajax朝后端发送数据
$.ajax({
url:'', // 朝那个地址发送数据
type:'post', // 提交数据的方式
data:{'i1':$('#d1').val(), 'i2':$('#d2').val()}, // 发送给后端的数据的数据
success:function (args) { // 形参args是用于接收后端返回的数据
$('#d3').val(args)
}
})
})
</script>
数据编码格式
Content-Type
1.格式1:urlencoded
数据格式: name=barry&pwd=123&hobby=read
django后端统一处理到request.POST中
2.格式2:formdata
数据格式: 无法查阅
django后端自动将文件数据处理到request.FILES 普通数据request.POST
3.格式3:application/json
数据格式: json格式
django后端不会处理 在request.body中存储(bytes类型) 自己处理
4.语法注意事项
$('#d2').blur(function (){
// 使用ajax朝后端发送数据
$.ajax({
url:'', // 朝那个地址发送数据
type:'post', // 提交数据的方式
data:JSON.stringify({'name':'barry','pwd':123}),
contentType:'application/json',
success:function (args) {
$('#d3').val(args)
}
})
})
data: JSON.stringify({'name':'barry','pwd':123}),
contentType:'application/json',
5.后端处理json格式
if request.method == 'POST':
json_bytes = request.body
json_dict = json.loads(json_bytes)
print(json_dict)
ajax携带文件数据
1.ajax携带文件数据
<input type="text" id="d1">
<input type="file" id="d2">
<button id="d3">上传</button>
<script>
$('#d2').blur(function () {
// 产生一个内置对象
let formData = new FormData();
// 添加普通数据
formData.append('username', $('#d1').val())
// 添加文件数据
formData.append('file', $('#d2')[0].files[0])
// 发送ajax请求
$.ajax({
url:'', // 朝那个地址发送数据
type:'post', // 提交数据的方式
data:formData, // 发送给后端的数据的数据
contentType:false, // 不使用任何编码
processData: false, // 不处理数据
success:function (args) { // 形参args是用于接收后端返回的数据
}
})
})
</script>
回调函数
1.后端与ajax交互,不应该返回页面,通常情况都是返回json格式数据
2.前端对HttpResponse和JsonResponse返回的json格式数据处理方式不同
2.1对HttpResponse不会自动反序列化
2.2对JsonResponse会自动反序列化
2.3如果想要让HttpResponse也自动反序列化可以添加一个固定的参数(在ajax内)
dataType:'JSON'
序列化
def ser(request):
# 拿到用户表里面的所有的用户对象
user_list = models.User1.objects.all()
# 导入内置序列化模块
from django.core import serializers
# 调用该模块下的方法,第一个参数是你想以什么样的方式序列化你的数据
ret = serializers.serialize('json', user_list)
return HttpResponse(ret)
标签:function,args,request,Ajax,json,ajax,数据
From: https://www.cnblogs.com/riuqi/p/16667694.html