Ajax

weer-wmq

于 2022-11-07 13:50:29 发布

阅读量178

点赞数

分类专栏： Django 文章标签： ajax javascript json

本文链接：https://blog.csdn.net/ITlearner007/article/details/127728951

版权

Django 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

-简介

Ajax(Asynchronous JavaScript and XML)，即使用JavaScript与服务器进行异步交互，传输的数据为XML

Ajax不是一门新的编程语言，而是基于现有标准实现的一种新方法

特点："异步提交，局部刷新"，在不刷新页面的前提下，可以与服务端交互数据并更新网页部分内容

PS：这为jQuery封装后的Ajax版，原生较复杂且一般不用。所以以下使用前需保证导入了jQuery

同时其它框架也可以用Ajax，比如Vue的axios

-基本语法

<script>
    $('#id').click(function(){
        $.ajax({
            // 1、提交地址
            url:'', // 默认不填即为当前地址
            // 2、请求方式
            type:'post', // 默认get请求
            // 3、朝后端提交数据
            data:'',
            // 4、回调函数
            success:function(){}
        })    
    })
</script>

--示例：简易加法计算

views.py

def know_ajax(request):
    if request.method == 'POST':
        # print(request.POST)
        num1 = request.POST.get('num1')
        num2 = request.POST.get('num2')
        result = int(num1) + int(num2)
        dict = {'name':'weer', 'age':18, 'result':result}
        return HttpResponse(json.dumps(dict))
        # 方式二：导入JsonResponse模块↓
        # return JsonResponse(dict)
    return render(request, 'html07 ajax初识 后端计算器.html')

html

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=
<input type="text" id="result">
<p>
    <button id="cal_btn">cal</button>
</p>
<script>
    // 给计算按钮绑定点击事件
    $('#cal_btn').click(function (){
        $.ajax({
            //1.提交地址
            url:'', // 默认不写也向当前地址提交
            //2.请求方式
            type:'post', // 默认是get请求
            //3.数据:朝后端发送的数据
            data:{'num1':$('#num1').val(),'num2':$('#num2').val()},
            //4.回调函数，当后端朝这发数据时自动触发
            dataType:'JSON',
            success:function (args){ // args是后端的返回结果,一般是httpresponse的返回结果
                {#alert(args)#}
                $('#result').val(args.result)
            }
        })
    })
</script>
</body>

-前后端数据编码格式

发送get请求的数据是直接放在url的？后面的，如url?name=weer&age=18

这我们研究post请求的数据的编码格式

前后端post请求传输数据的编码格式：

1、urlencoded

2、formdata

3、json

--form表单

<form action="" method="post">
    <p>username:<input type="text" name="username" class="form-control"></p>
    <p>password:<input type="text" name="password" class="form-control"></p>
    <input type="submit">
</form>

点击提交后-右键-检查-点击url对应-在请求头里找到Content-Type，默认是urlencoded

所以form表单post请求的默认数据编码格式为urlencoded，在后端接收到的是键值对数据，在request.POST中接收，因为Django会自动帮你把符合urlencoded的数据解析封装到request.POST中

如果把编码格式改为form-data，即加上 enctype="multipart/form-data"，则针对普通键值对数据还是在request.POST中取；

而文件数据则在request.FILES中取

form表单无法发送json格式数据

--Ajax

Ajax默认数据编码格式也是urlencoded，对urlencoded格式的数据Django自动封装到request.POST中

---Ajax发送json格式数据

1、数据格式为json格式

2、在ajax中指定contentType为json

$.ajax({
    url:'',
    type:'post',
    data:JSON.stringfy({'name':'weer', 'age':18}), // 序列化为JSON格式数据
    contentType:'application/json',    // 指定为json格式数据编码
    success:function(){}
})

后端接收此数据时，发过来的json格式数据在request.body中接收，

但request.body直接接收到的是二进制式数据，

json_bytes = request.body # b'{"name":"weer", "age":18}'

需要自己解码，

json_str = json_bytes.decode('utf-8')

然后再反序列化。

data = json.dumps(json_str)

解码和反序列化两步可以并为一步：

data = json.loads(json_bytes)

---Ajax发送文件数据

Ajax发送文件数据需要借助于js内置的FormData对象，FormData中不仅可以塞文件数据，还可以塞普通键值对数据

并且Django会自动帮你识别封装，将FormData中的普通键值对数据封装到request.POST中；将FormData中的文件数据封装到request.FILES中。

1、利用FormData对象

2、两个必备配置参数

3、数据接收方式各自

<script>
    $('#btn').on('click', function(){
		// 1 首先需要创建FormData对象
		let formDataObj = new FormData();
		// 2 可添加普通键值对数据
		formDataObj.append('user','weer')
		formDataObj.append('age',18)
		// 3 添加文件对象
		formDataobj.append('filename', $('#file')[0].files[0])
		$.ajax({
			url:'',
			type:'post',
			data:formDataObj,
			// ajax发送文件数据必备两个配置参数
			contentType:false, // 即不用任何编码
			processData:false, // 告诉浏览器不对数据做任何处理
			success:function(){}
		})
	})
</script>

weer-wmq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax

Ajax(Asynchronous JavaScript and XML)，即使用JavaScript与服务器进行异步交互，传输的数据为XMLAjax不是一门新的编程语言，而是基于现有标准实现的一种新方法特点："异步提交，局部刷新"，在不刷新页面的前提下，可以与服务端交互数据并更新网页部分内容PS：这为jQuery封装后的Ajax版，原生较复杂且一般不用。所以以下使用前需保证导入了jQuery同时其它框架也可以用Ajax，比如Vue的axios。
复制链接

扫一扫