Ajax，前后端数据编码格式

李智强@

已于 2022-12-16 15:44:04 修改

阅读量1k

点赞数

分类专栏： django 文章标签： ajax javascript ecmascript

于 2022-09-07 23:25:35 首次发布

本文链接：https://blog.csdn.net/lzq78998/article/details/126754006

版权

django 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

Ajax
回调函数
序列化

Ajax

什么是Ajax？

简介：

Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

作用：

能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

强调：

Ajax是异步提交，局部刷新

复习知识：

什么是异步？

异步操作就是，当程序遇到IO时，不原地等待，会去另一个程序执行

基础语法

$.ajax({
	url:'控制数据提交的地址',
	type:'提交的方式',
	data:{'提交的数据'},
	success:function (形参) {
		异步回调函数
	}
})

数据编码格式

参数名：Content_Type

三种参数值(三种格式)：

urlencoded
数据格式eg：name=‘jason’&age=18
django后端统一处理到request.POST中
formdata
数据格式：无法查询
django后端自动将文件数据处理到request.FILES中
application/json
数据格式：json格式
django后端不会处理，在request.body中存储(bytes类型)，需要自己处理

语法注意事项
```
data:Json.Stringify({'name': jason, 'age': 18})
Json.Stringify:是JS中序列化方式
contentType:'application/json'
```

Ajax携带文件数据

ajax传文件需要注意的事项

利用formdata对象能够简单的快速传输数据 (普通键值 + 文件)

生成一个formdata对象： var FormData = new FormData()

有几个参数

data:formdata对象  #  传输对象
contentType:false # 不用任何编码 因为formdata对象自带编码 django能够识别该对象
processData:false # 告诉浏览器不要处理我的数据 直接发就行

需要利用内置对象：FormData
该对象既可以传普通的键值也可以传文件
获取input框用户上传的文件的内容
1.先通过jquery查找到该标签
2.将jquery对象转换成原生的js对象
3.利用原生js对象的方法直接获取文件内容
eg: $(‘#t3’)[0].files[0]

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<p><input type="text" id="i2"></p>
<p><input type="file" id="i1"></p>
<button id="sub">提交</button>


</body>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    $('#sub').click(function () {
        let formdata = new FormData();
        formdata.append('username', $('#i2').val())
        formdata.append('file', $('#i1')[0].files[0])
        $.ajax({
            url: '',
            type: 'post',
            data: formdata,
            contentType:false,
            processData: false,
            success: function (args) {

            }
        })
    })


</script>
</html>

后端代码：

def ajax(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request, 'ajax.html')

回调函数

redirect是没有办法跳转字符串形式的网址的

后端与ajax做交互的时候，只是把值传给了前端中的args，而不会影响整个页面

如果你想就这样实现通过重定向跳转页面，那么你可以将网址传给后端的args，然后让前端帮你实现

后端通过HttpResponse传输json.dumps序列化后的数据到前端是，是先基于HTTP协议转换成二进制模式，前端可能会自动帮我们解码处理

后端跟ajax交互 不应该再返回页面 通常情况下都是返回json格式数据
前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同
HttpResponse不会自动反序列化 而JsonResponse会自动反序列化
	如果想让前者也自动反序列化可以添加一个固定的参数
  	dataType:'JSON'

序列化

可以根据自己想要的方式序列化数据

导入模块：from django.core import serializers

格式：

def ser(request):
    #拿到用户表里面的所有的用户对象
    user_list=models.User.objects.all()
    #导入内置序列化模块
    from django.core import serializers
    #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
    ret=serializers.serialize('json',user_list)
    return HttpResponse(ret)