Django Ajax

标签：请求方式   交互   his   link   min   function   pager   方法   分页   

• Ajax简介
• ajax示例
• 前后端传输数据的编码格式(contentType)
• ajax发送json格式数据
• ajax发送文件
• django自带的序列化组件
• 批量插入
• 自定义分页器

Ajax简介

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

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

Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用)

ajax示例

{# index.html #}




 +
 =

    点我

# views.py

import json
from django.http import JsonResponse

def ab_ajax(request):
    if request.method == "POST":
        # print(request.POST)  # 
        i1 = request.POST.get(‘i1‘)
        i2 = request.POST.get(‘i2‘)
        # 先转成整型再加
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)

        # d = {‘code‘:100,‘msg‘:666}
        # 向前端传字典要序列化
        # return HttpResponse(json.dumps(d))
        # return JsonResponse(d)
    return render(request,‘index.html‘)

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

"""
我们主要研究post请求数据的编码格式
get请求数据就是直接放在url后面的 url?username=jason&password=123

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

前后端传输数据的编码格式
1.urlencoded
2.formdata
3.json
"""
# form表单
默认的数据编码格式是urlencoded
数据格式:username=jason&password=123
django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
# request.POST>> username=jason&password=123

如果你把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中

# form表单是没有办法发送json格式数据的


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

ajax发送json格式数据

"""
1.前后端传输数据的时候一定要确保编码格式跟数据真正的格式是一致的!!!

2.前后端传输json数据在request.POST里面是找不到的,需要到request.body里找

3.django针对json格式的数据不会做任何的处理

4.request.is_ajax()判断当前请求是否是ajax请求 返回布尔值
"""

‘‘‘ab_json.html

点我

‘‘‘

# views.py
def ab_json(request):
    if request.is_ajax():
        json_bytes = request.body
        # json_str = json_bytes.decode(‘utf-8‘)
        # json_dict = json.loads(json_str)

        # json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
        json_dict = json.loads(json_bytes)
        print(json_dict,type(json_dict))  # {‘username‘: ‘jason‘, ‘age‘: 25} 
    return render(request,‘ab_json.html‘)
"""
ajax发送json格式数据需要注意点
	1.contentType参数指定成:application/json
	2.数据是真正的json格式数据
	3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理
"""

ajax发送文件

"""
ajax发送文件需要借助于js内置对象FormData
"""
"""ab_file.html

username:
password:

点我


"""

# views.py
def ab_file(request):
    if request.is_ajax():
        if request.method == ‘POST‘:
            print(request.POST)
            print(request.FILES)
    return render(request,‘ab_file.html‘)

"""
总结:
1.需要利用内置对象FormData
	// 2 添加普通的键值对
    formDateObj.append(‘username‘,$(‘#d1‘).val());
    formDateObj.append(‘password‘,$(‘#d2‘).val());
    // 3 添加文件对象
    formDateObj.append(‘myfile‘,$(‘#d3‘)[0].files[0])
    
2.需要指定两个关键性的参数
	contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
    processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理
    
3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中
"""

django自带的序列化组件

给前端返回列表套字典格式的数据

from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
    user_queryset = models.User.objects.all()
    # user_list = []
    # for user_obj in user_queryset:
    #     tmp = {
    #         ‘pk‘:user_obj.pk,
    #         ‘username‘:user_obj.username,
    #         ‘age‘:user_obj.age,
    #         ‘gender‘:user_obj.get_gender_display()
    #     }
    #     user_list.append(tmp)
    # return JsonResponse(user_list,safe=False)

    # 序列化
    res = serializers.serialize(‘json‘,user_queryset)
    """会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""
    return HttpResponse(res)
"""
[
{   "model": "app01.user", 
    "pk": 1, 
    "fields": {"username": "jason", "age": 25, "gender": 1}}, 
    
{   "model": "app01.user", 
    "pk": 2, 
    "fields": {"username": "egon", "age": 31, "gender": 2}}, 
    
{   "model": "app01.user", 
    "pk": 3, 
    "fields": {"username": "kevin", "age": 32, "gender": 3}},
     
{   "model": "app01.user", 
    "pk": 4, 
    "fields": {"username": "tank", "age": 40, "gender": 4}}
]
"""

ajax结合sweetalert

        {% for user_obj in user_queryset %}
            
        {% endfor %}
    


ID
            
username
            
age
            
gender
            
actions
        

{{ user_obj.pk }}
                
{{ user_obj.username }}
                
{{ user_obj.age }}
                
{{ user_obj.get_gender_display }}
                

                    编辑
                    删除
                
            

批量插入

def ab_pl(request):
    # 先给Book插入一万条数据
    # for i in range(10000):
    #     models.Book.objects.create(title=‘第%s本书‘%i)
    # # 再将所有的数据查询并展示到前端页面
    # book_queryset = models.Book.objects.all() # 页面加载很慢

    # 批量插入
    book_list = []
    for i in range(100000):
        book_obj = models.Book(title=‘第%s本书‘%i)
        book_list.append(book_obj)
    models.Book.objects.bulk_create(book_list)
    return render(request,‘ab_pl.html‘,locals())

"""
当你想要批量插入数据的时候 使用orm给你提供的bulk_create能够大大的减少操作时间
"""
   

自定义分页器

# 自定义分页器
class Pagination(object):
    def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page 1