七、django的Ajax

盛成皿1990

于 2021-01-05 17:22:11 发布

阅读量227

点赞数

分类专栏： django之路

本文链接：https://blog.csdn.net/weixin_42155272/article/details/112233463

版权

django之路专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

简介

总结下向服务端发送请求的方式

浏览器地址栏直接输入url回车（实现GET请求）
a标签href属性（实现GET请求）
form表单（实现GET或者POST请求）
ajax（实现GET或者POST请求）

AJAX 相比较其他三种方式，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这个特点让用户无感知的情况下完成了请求和响应过程）

Ajax我们只学习jQuery封装之后的版本(不学原生的原生的复杂并且在实际项目中也一般不用)，所以我们在前端页面使用ajax的时候需要确保导入了jQuery

AJAX 不是新的编程语言，而是一种使用现有标准的新方法(类似于装饰器)

ps:并不只有jQuery能够实现ajax，其他的框架也可以但是换汤不换药原理是一样的

实例演示

下面用一个小例子讲解Ajax，让我们对Ajax有个简单的了解。

例子要求：

页面上有三个input框
在前两个框中输入数字点击按钮朝后端发送ajax请求
后端计算出结果再返回给前端动态展示的到第三个input框中

因需要涉及前端编写ajax，所以先从前端模板层开始写

模板文件ajax.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <input type="text" id="d1"> +
    <input type="text" id="d2"> =
    <input type="text" id="d3">
    <p>
        <button id="btn">点我</button>
    </p>

    <script>
        // 先给按钮绑定一个点击事件
        $('#btn').click(function () {
            // 朝后端发送ajax请求
            $.ajax({
                // 1.指定朝哪个后端发送ajax请求
                url:'', // 不写就是朝当前地址提交
                // 2.请求方式
                type:'post',  // 不指定默认就是get 都是小写
                // 3.数据
                data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
                // 4.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果
                success:function (args) {
                    $('#d3').val(args)
                }
            })
        })
    </script>
</body>
</html>

部分视图层views.py文件内容：

def ajax(request):
    if request.method=="POST":
        i3=int(request.POST.get('i1'))+int(request.POST.get('i2'))
        print(i3)
        return HttpResponse(i3)
    return render(request,'app01/ajax.html')

前后端传输数据的编码格式

# 我们主要研究post请求数据的编码格式

"""
get请求数据就是直接放在url后面的
url?username=jason&password=123
"""

# 可以向后端发送post请求的方式
	"""
	1.form表单
	2.ajax请求
	"""

  
"""
前后端传输数据的编码格式
	urlencoded
	
	formdata
	
	json
"""
# 研究form表单
默认的数据编码格式是urlencoded
	在http报文中的数据格式:username=jason&password=123
	django后端针对符合urlencoded编码格式的数据都会自动帮你解析，并封装到request.POST中
	  	
  
如果你把编码格式改成formdata，那么针对普通的键值对还是解析并封装到request.POST中，而将文件解析并封装到request.FILES中
  

form表单是没有办法发送json格式数据的，ajax可以发送json格式数据到后端

研究ajax

ajax传送urlencoded数据

默认的编码格式也是urlencoded
  在http报文中的数据格式:username=jason&age=20
  django后端针对符合urlencoded编码格式的数据都会自动帮你解析，并封装到request.POST中

ajax传送json数据

"""
ajax发送json格式数据需要注意
	1.contentType参数指定成:application/json
	2.数据是真正的json格式数据
	3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理
"""
request对象方法补充
	request.is_ajax()  判断当前请求是否是ajax请求 返回布尔值


ajax前端页面ab_json.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-danger" id="d1">点我</button>

<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'jason','age':25}),
            // JSON.stringify将数据系列化为json格式
            contentType:'application/json',  
            // 指定编码格式
            success:function () {

            }
        })
    })
</script>
</body>
</html>


ab_json.html对应的视图函数：
def ab_json(request):
    if request.is_ajax():
        # 针对json格式数据需要你自己手动处理
        json_bytes = request.body
        # json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
        json_dict = json.loads(json_bytes)  
        print(json_dict,type(json_dict))  
        # {'username': 'jason', 'age': 25} <class 'dict'>
    return render(request,'app01/ab_json.html')

ajax传送文件

"""
ajax发送文件需要注意
	1.需要利用JS内置类FormData，生成一个对象formDateObj
		  
	2.向对象formDateObj添加文件对象
	       formDateObj.append()
		   也可以通过append()添加键值对
		   
	3.需要指定两个关键性的参数
		   contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
	       processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理
	       
	4.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中，文件数据自动解析并封装到request.FILES中
"""

ajax前端页面ab_file.html内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-info" id="d4">点我</button>

<script>
    // 点击按钮朝后端发送普通键值对和文件数据
    $('#d4').on('click',function () {
        // 1 需要先利用FormData内置对象
        let formDateObj = new FormData();
        // 2 添加普通的键值对
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        // 3 添加文件对象
        formDateObj.append('myfile',$('#d3')[0].files[0])
        // 4 将对象基于ajax发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDateObj,  // 直接将对象放在data后面即可

            // ajax发送文件必须要指定的两个参数
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理

            success:function (args) {
            }
        })
    })
</script>
</body>
</html>

ab_file.html对应的视图函数：

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

盛成皿1990

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
七、django的Ajax

文章目录简介实例演示前后端传输数据的编码格式研究ajaxajax传送json数据ajax传送json数据ajax传送文件简介总结下向服务端发送请求的方式浏览器地址栏直接输入url回车（实现GET请求）a标签href属性（实现GET请求）form表单（实现GET或者POST请求）ajax（实现GET或者POST请求）AJAX 相比较其他三种方式，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这个特点让用户无感知的情况下完成了请求和响应过程）Ajax我们
复制链接

扫一扫

专栏目录