Ajax和django自带序列化组件
1.Ajax
1.1 Ajax介绍
- AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
- 即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：
- 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：
- 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
1.2 发送请求方式
- 向后端发送请求的方式
- 浏览器地址直接url回车
- a标签的 href 属性
- form表单
- Ajax
1.3 Ajax案例
- 页面上有两个 input 框
- 在第一个input框中输入数字，在第二个框中也输入数字
- 计算结果渲染到第三个框中
1.3.1 JS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>number_one : <input type="text" id="number1"></div>
<div>number_two : <input type="text" id="number2"></div>
<div>result : <input type="text" id="result"></div>
<button id="btn_result">点我计算结果</button>
<script>
$(document).ready(
$("#btn_result").click(function () {
let numberOne = $("#number1").val();
let numberTwo = $("#number2").val();
let result = parseInt(numberOne) + parseInt(numberTwo)
$("#result").val(result)
})
)
</script>
</body>
</html>
1.3.2 Ajax基础实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>number_one : <input type="text" id="number1"></div>
<div>number_two : <input type="text" id="number2"></div>
<div>result : <input type="text" id="result"></div>
<button id="btn_result">点我计算结果</button>
<script>
$(document).ready(
$("#btn_result").click(function () {
let numberOne = $("#number1").val();
let numberTwo = $("#number2").val();
// 基于Ajax发送请求
$.ajax({
// 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
url: "",
// type : 请求类型 GET / POST ，默认是get
type: "post",
// data ： 自己携带数据 ，做成字典的格式传输数据
data: {'number_one': numberOne, "number_two": numberTwo},
// success : 回调函数 ， 负责接收到后端返回的数据
success: function (data) {
console.log(data)
$("#result").val(data)
}
})
})
)
</script>
</body>
</html>
1.3.3 渲染json 数据
def home(request):
if request.method == "POST":
data = request.POST
number_one = data.get("number_one")
number_two = data.get("number_two")
result = int(number_one) + int(number_two)
# return HttpResponse(result)
return HttpResponse(json.dumps({"code": 300, "result": result}))
return render(request, "home.html", locals())
<script>
$(document).ready(
$("#btn_result").click(function () {
let numberOne = $("#number1").val();
let numberTwo = $("#number2").val();
// 基于Ajax发送请求
$.ajax({
// 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
url: "",
// type : 请求类型 GET / POST ，默认是get
type: "post",
// data ： 自己携带数据 ，做成字典的格式传输数据
data: {'number_one': numberOne, "number_two": numberTwo},
// success : 回调函数 ， 负责接收到后端返回的数据
success: function (data) {
console.log(data)
console.log(typeof (data))
// 使用 js自己的序列化方法序列化数据
let dataVal = JSON.parse(data)
console.log(typeof (dataVal))
if (dataVal.code === 200) {
$("#result").val(dataVal.result)
} else {
alert("非法的数据")
}
}
})
})
)
</script>
- 上述方法，后端传给前端的数据是 string 类型，需要在前端自己做一步类型强转
- 后端的 jsonresponse对象渲染json格式的数据
- 发现在前端接收到的数据类型就是 object 类型，不需要额外的转换
def home(request):
if request.method == "POST":
data = request.POST
number_one = data.get("number_one")
number_two = data.get("number_two")
result = int(number_one) + int(number_two)
return JsonResponse({"code": 300, "result": result})
return render(request, "home.html", locals())
<script>
$(document).ready(
$("#btn_result").click(function () {
let numberOne = $("#number1").val();
let numberTwo = $("#number2").val();
// 基于Ajax发送请求
$.ajax({
// 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
url: "",
// type : 请求类型 GET / POST ，默认是get
type: "post",
// data ： 自己携带数据 ，做成字典的格式传输数据
data: {'number_one': numberOne, "number_two": numberTwo},
// success : 回调函数 ， 负责接收到后端返回的数据
success: function (data) {
console.log(data)
console.log(typeof (data))
// 使用 js自己的序列化方法序列化数据
{#let dataVal = JSON.parse(data)#}
console.log(typeof (data))
if (data.code === 200) {
$("#result").val(data.result)
} else {
alert("非法的数据")
}
}
})
})
)
</script>
1.4 Ajax语法总结
<script>
// 先给按钮绑定点击事件
$('#btn').click(function () {
// 向后端发送Ajax请求
$.ajax({
// （1）指定发送后端的请求接口
url: '',// 不写就是朝当前地址发送请求
// （2）请求方式
type: "post", // 不指定默认就是 get 全小写
// dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
// dataType: "json",
// （3）提交数据, 自己携带数据 ，做成字典的格式传输数据
data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
// （4）异步提交有一个回调函数 （异步回调机制）
// 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
success: function (args) {
{#alert(args)#}
// 通过DOM操作动态数据渲染到第三个 input 框中
console.log(args) // string
$('#d3').val(args)
},
})
})
</script>
1.5 前后端传输数据的编码格式(contentType)
- 无论是form表单还是Ajax，传输数据的默认编码格式都是urlencoded
- formdata ： 可以传输文件数据 request.FILES
- json : application/json
def home(request):
if request.method == "POST":
data =request.body
print(data) # b'{"number_one":"32","number_two":"3"}'
data = data.decode('utf8')
print(data) # {"number_one":"32","number_two":"3"}
print(type(data)) # <class 'str'>
data = json.loads(data)
print(type(data))
number_one = data.get("number_one")
number_two = data.get("number_two")
result = int(number_one) + int(number_two)
return JsonResponse({"code": 200, "result": result})
return render(request, "home.html", locals())
<script>
$(document).ready(
$("#btn_result").click(function () {
let numberOne = $("#number1").val();
let numberTwo = $("#number2").val();
// 基于Ajax发送请求
$.ajax({
// 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
url: "",
// type : 请求类型 GET / POST ，默认是get
type: "post",
// data ： 自己携带数据 ，做成字典的格式传输数据
data: JSON.stringify({'number_one': numberOne, "number_two": numberTwo}),
{#data: {'number_one': numberOne, "number_two": numberTwo},#}
// success : 回调函数 ， 负责接收到后端返回的数据
success: function (data) {
console.log(data)
console.log(typeof (data))
// 使用 js自己的序列化方法序列化数据
{#let dataVal = JSON.parse(data)#}
console.log(typeof (data))
if (data.code === 200) {
$("#result").val(data.result)
} else {
alert("非法的数据")
}
}
})
})
)
</script>
1.6 Ajax传输文件数据
<script>
$(document).ready(
$("#btn_result").click(function () {
let numberOne = $("#number1").val();
let numberTwo = $("#number2").val();
let fileVal = $("#file_input")[0].files[0];
// Ajax携带文件数据需要借助第三方的 formData对象
// （1）实例化得到一个 form对象
// 将所有的键值对数据都要放到 form对象中
let formDataObj = new FormData();
formDataObj.append("numberOne", numberOne)
formDataObj.append("numberTwo", numberTwo)
formDataObj.append("file", fileVal)
console.log(fileVal)
console.log(formDataObj)
// 基于Ajax发送请求
$.ajax({
// 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
url: "",
// type : 请求类型 GET / POST ，默认是get
type: "post",
// data ： 自己携带数据 ，做成字典的格式传输数据
// （2）传输的data直接放上面的 form对象即可
data: formDataObj,
// （3）走form对象不能让他使用编码对数据进行编码
contentType: false, // 默认编码是 urlencoded
// （4）告诉浏览器不要对数据进行额外的处理
processData: false,
{#data: {'number_one': numberOne, "number_two": numberTwo},#}
// success : 回调函数 ， 负责接收到后端返回的数据
success: function (data) {
console.log(data)
console.log(typeof (data))
// 使用 js自己的序列化方法序列化数据
{#let dataVal = JSON.parse(data)#}
console.log(typeof (data))
if (data.code === 200) {
$("#result").val(data.result)
} else {
alert("非法的数据")
}
}
})
})
)
</script>
def home(request):
if request.method == "POST":
# 可以用来判断当前的请求方式是否是Ajax
print(request.is_ajax()) # True
# print(type(request.body.decode("utf-8")[0]))
# 获取普通的键值对数据只需要通过 POST方法
data = request.POST
print(data) # <QueryDict: {'numberOne': ['2'], 'numberTwo': ['2']}>
# 获取form对象中的文件数据也要借助 FILES
print(request.FILES) # <MultiValueDict: {'file': [<InMemoryUploadedFile: avatar.jpg (image/jpeg)>]}>
return JsonResponse({"code": 200, "result": "ok"})
return render(request, "home.html", locals())
2. django自带的序列化组件
2.1 基于jsonresponse序列化数据
from app01.models import User
def get_user(request):
# 查询所有用户数据
user_data_list = []
user_queryset = User.objects.all()
for user_obj in user_queryset:
user_data_list.append(
{
"username": user_obj.username,
"age": user_obj.age,
"gender": user_obj.get_gender_display()
}
)
print(user_data_list)
return JsonResponse(user_data_list, safe=False)
[
{
"username": "serein",
"age": 18,
"gender": "female"
},
{
"username": "zzp",
"age": 28,
"gender": 2
},
{
"username": "xyk",
"age": 22,
"gender": "female"
}
]
2.2 基于Django自带的serializers
# 使用内置的serializers
def get_user(request):
# 查询所有用户数据
user_queryset = User.objects.all()
user_data_list = serializers.serialize('json', user_queryset)
# format参数如下，
# BUILTIN_SERIALIZERS = {
# "xml": "django.core.serializers.xml_serializer",
# "python": "django.core.serializers.python",
# "json": "django.core.serializers.json",
# "yaml": "django.core.serializers.pyyaml",
# "jsonl": "django.core.serializers.jsonl",
# }
print(user_data_list)
return JsonResponse(user_data_list, safe=False)
"[{\"model\": \"app01.user\", \"pk\": 1, \"fields\": {\"username\": \"serein\", \"age\": 18, \"gender\": 1}}, {\"model\": \"app01.user\", \"pk\": 2, \"fields\": {\"username\": \"zzp\", \"age\": 28, \"gender\": 2}}, {\"model\": \"app01.user\", \"pk\": 3, \"fields\": {\"username\": \"xyk\", \"age\": 22, \"gender\": 1}}]"
浙公网安备 33010602011771号