django组件之 Ajax,contentType,serializers,分页器

最新推荐文章于 2023-12-20 22:44:11 发布

i0208

最新推荐文章于 2023-12-20 22:44:11 发布

阅读量260

点赞数

分类专栏： Django框架

本文链接：https://blog.csdn.net/Waller_/article/details/104234508

版权

Django框架专栏收录该内容

25 篇文章 1 订阅

订阅专栏

Ajax

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax常见应用情景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

Ajax优点

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

总结: 1.局部刷新，2.异步请求

Ajax使用

/*基本参数:*/
1.url : 提交的地址
2.type : 提交的方式(默认GET)
3.data : 提交的数据
4.dataType:'JSON'  会自动将Django以HttpResponse响应的数据反系列化(该参数可以指定)
    return HttpResponse(json.dumps(back_dic))  # 需要dataType参数
    return JsonResponse(back_dic)  # 不需要
5.success : 回调函数(因为是异步提交,需要回调函数,取结果)

/*基本语法:*/ Ajax通常与事件绑定使用
$('#d1').click(function() {
    $.ajax({
        url:'/index/',  // 提交的地址
        type:'post',  // 提交的方式
        data:{'name':'xionger', 'password':'123'}  // 提交的数据
        success:function(data) {
            alert(data)  // data接收的就是异步提交返回的结果
    }  
    })
})

注意: data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。

案例:

求和案例
<!--前端-->
<body>
<input type="text" id="id1"> + <input type="text" id="id2"> = <input type="text" id="id3">
<button id="b1">求和</button>

<script>
    $('#b1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{'id1':$('#id1').val(),'id2':$('#id2').val()},
            success:function (data) {
                // {alert(data)}   data形参用来接收异步提交的结果
                $('#id3').val(data)  // 通过DOM操作,将结果渲染到第三个input框中
            }
        })
    })
</script>
</body>

# 后端
def index(request):
    if request.is_ajax():  # 判断是否是Ajax
        if request.method == 'POST':  # POST 方式请求的数据都在POST中
            id1 = request.POST.get('id1')
            id2 = request.POST.get('id2')
            # 数据传输过来d都是字符串,强转整型
            id1 = int(id1)
            id2 = int(id2)
            res = id1 + id2
            # 将结果返回到前端
            return HttpResponse(res)
    return render(request, 'index.html')

contentType

前后端传输数据编码格式

1.urlencoded  # form表单与Ajax默认的数据编码格式
2.formdata  # form表单
3. json  # Ajax
ps: Ajax传输文件建议使用内置对象: new Formdata()
'''注意:前后端传输数据的时候,一定要保证数据格式和你的编码格式是一致的'''

urlencoded

1.数据格式: name=xionger&password=123
2.Django后端针对urlencoded编码格式的数据会自动解析并放到 request.POST 中.
3.form表单与Ajax默认的数据编码格式

formdata

1.form表单传输文件的编码格式
2.Django后端针对form表单指定formdata格式传输文件就会自动解析并将文件放到request.FILES中
3.使用:<form action="" method="post" enctype="multipart/form-data">

json

1.Ajax发送json格式数据
2.Django后端针对json格式的数据,并不会自动解析放到request.POST或者request.FILES里面,
　　它并不会解析json格式数据,而是将它原封不动的放在request.body中
3.使用:
    data:JSOM.stringify({'name':'xionger', 'password':123})
ps:JSOM.stringify() 类似 json.dumps()

问题: django后端针对不同的编码格式是如何处理的?

1.只要是符合urlencoded编码格式都会被后端自动获取并解析放到request.POST中
2.如果是符合formdata那么文件会自动被解析放到request.FILES中
3.如果是json格式后端默认不解析以二进制的形式就放在request.body你可以自己手动处理即可

案例:

Ajax发送json格式数据

<!--前端-->
<body>
<input type="text" id="name" >  <input type="text" id="pwd" >
<button id="b1">登录</button>

<script>
    $('#b1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'id1':$('#name').val(),'id2':$('#pwd').val()}),
            contentType:'application/json',  // 告诉后端传世的数据时json格式
            success:function (data) {
                {alert(data)}  // data形参用来接收异步提交的结果
                $('#id3').val(data)  // 通过DOM操作,将结果渲染到第三个input框中
            }
        })
    })
</script>
</body>

# 后端
import json
def login(request):
    if request.is_ajax():  # 判断是否是Ajax
        if request.method == 'POST':
            json_bytes = request.body  # 前端json格式传输的数据都在request.body中
            # 在request.body中,json格式的数据没有任何处理,是二进制形式,需要后端反序列化
            print(json.loads(json_bytes))  # {'id1': 'xionger', 'id2': '123'}
            name = json.loads(json_bytes).get('name')
            password = json.loads(json_bytes).get('pwd')
            print(name)  # xionger
            print(password)  # 123
            # 将结果返回到前端
            return HttpResponse('OK')
    return render(request, 'ajax_json.html')

serializers

当拿到由ORM得到的数据库里面的一个个用户对象，后端想直接将实例化出来的数据对象直接发送给客户端，那么这个时候，就可以用Django给我们提供的序列化方式

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

# 前端得到: 
[{"model": "app01.user","pk": 1,"fields": 
  {"username": "jason","age": 18,"gender": 1}
    }......]

分页器

# 前端
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {% for book in page_queryset %}
            <p>{{ book.title }}</p>
            {% endfor %}
            {{ page_obj.page_html|safe }}
        </div>
    </div>
</div>
</body>

# 后端
from app01.utils.mypage import Pagination
def book(request):
    book_list = models.Book.objects.all()
    current_page = request.GET.get("page",1)
    all_count = book_list.count()
    
    page_obj = Pagination(
        current_page=current_page,
        all_count=all_count,
        per_page_num=10
       )
    page_queryset = book_list[page_obj.start:page_obj.end]


    return render(request,'booklist.html',locals())

# current_page: 当前页
# all_count:    数据库中的数据总条数
# per_page_num: 每页显示的数据条数
# pager_count:  最多显示的页码个数