ajax django计算器,django与Ajax
目录
Ajax简介
Ajax(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)。
ajax是异步提交的
Ajax 不是新的编程语言，而是一种使用现有标准的新方法。
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
举个实例
Title+ =
计算
$('#b1').on('click', function () {
$.ajax({
url:'', // 数据提交的地址， 不写就是向当前页面提交，也可以写后缀，也可以写全称，与form表单参数action一样
type: 'post', // 提交方式，不写默认是get请求
data: {'t1': $('#t1').val(), 't2':$('#t2').val()}, // 提交的数据
success: function (data) { // 形参data就是异步提交之后后端返回的结果
$('#t3').val(data)
}
})
})
数据传输编码格式的解析
前后端交互式一个数据编码格式，针对不同的数据，后端会进行不同的处理
三种格式：
urlencoded
formdata
application/json
form表单发送三种数据格式的情况
form表单post请求默认的编码格式是urlencoded
在浏览器-->检查-->network可以看到，我们form表单在提交数据的时候，有如下信息：
Request Headers： # 请求头
Content-Type:application/x-www-form-urlencoded; charset=UTF-8 # 数据编码格式-urlencoded
Form Data：# 携带的数据
d1=23&d2=23
在我们后端django中针对urlencoded数据，会自动解析并封装到request.POST方法中
form表单发送文件
Request Headers： # 请求头
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ # 数据编码格式，-form-data
Form Data：#针对form-data格式的数据，在浏览器是无法查看的
发送到后端django，文件对象会自动解析到 request.POST 和 request.FILES 中，前者记录文件名，后者记录对象。
form表单无法发送json格式的数据，要想实现，只能借助ajax
ajax发送数据的编码格式
默认的编码格式也是urlencoded
ajax传输json格式数据
有个参数，contentType，不写默认是urlencoded，
在view.py中
import json
def home(request):
if request.method == "POST":
print(request.body)
json_bytes = request.body
print(json.loads(json_bytes), type(json.loads(json_bytes)))
# 反序列化为python字典格式
return render(request, 'form_test.html')
# 结果：
'''
b'{"d1":"cwz","d2":"123"}'
{'d1': 'cwz', 'd2': '123'}
'''
form_test.html文件：
Titleusername:
password:
点我发送json格式
$('#d3').click(function () {
$.ajax({
url:'',
type:'post',
contentType:'application/json', //需要指定编码格式为json
data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 需要前端发送JSON字符串，JSON。stringify序列化即可。
success:function (data) {
alert(123)
}
})
})
ajax传json格式数据特点：
django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中 你可以手动处理 获取数据。拿到request.body是一个bytes类型数据
Ajax传输文件数据
需要借助内置对象，该对象既可以携带文件数据，同样也支持普通的键值对
注意几个参数：
data：formdata对象
contentType：false
processData：false
Titleusername:
password:
myfile:
点我发送文件
$('#d2').click(function () {
// 先生成一个内置对象
var MyFormData = new FormData();
// 先添加普通的键值
MyFormData.append('username', 'cwz');
MyFormData.append('password', '123');
//添加文件数据
MyFormData.append('myfile', $('#d1')[0].files[0]); // 将jquery对象转换成原生的js对象,利用原生js对象的方法 直接获取文件内容
$.ajax({
url: '',
type: 'post',
data: MyFormData,
contentType: false, //不用任何编码,因为formData对象自带编码 django能够识别该对象
processData: false, //告诉浏览器不要处理我的数据 直接发就行
success: function (data) {
}
})
})
django内置序列化模块
序列化的目的就是 将数据整合成一个大字典
导入这个模块：from django.core import serializers
比自己用json转方便多了
from app01 import models
from django.core import serializers
def yyy(request):
author_queryset = models.Author.objects.all()
res = serializers.serialize('json', author_queryset)
return HttpResponse(res)
效果：
[{
"model": "app01.author",
"pk": 1,
"fields": {
"name": "\u90b6\u98ce",
"email": "[email protected]",
"author_detail": 1
}
}, {
"model": "app01.author",
"pk": 2,
"fields": {
"name": "\u5f0f\u5fae",
"email": "[email protected]",
"author_detail": 2
}
}, {
"model": "app01.author",
"pk": 3,
"fields": {
"name": "\u65e0\u540d",
"email": "[email protected]",
"author_detail": 3
}
}]