day67-ajax發送數據，分頁器等

先後端傳輸數據的編碼格式(contentType)

# 咱們主要研究post請求數據的編碼格式
"""
get請求數據就是直接放在url後面的
url?username=jason&password=123
"""

# 能夠朝後端發送post請求的方式
    """
    1.form表單
    2.ajax請求
    """

  
"""
先後端傳輸數據的編碼格式
    urlencoded
    
    formdata
    
    json
"""
# 研究form表單
    默認的數據編碼格式是urlencoded
  數據格式:username=jason&password=123
  django後端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中
      username=jason&password=123    >>> request.POST
  
  若是你把編碼格式改爲formdata，那麼針對普通的鍵值對仍是解析到request.POST中而將文件解析到request.FILES中
  
  form表單是沒有辦法發送json格式數據的
 

# 研究ajax
    默認的編碼格式也是urlencoded
  數據格式:username=jason&age=20
    django後端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中
      username=jason&age=20    >>> request.POST

ajax發送json格式數據

"""
先後端傳輸數據的時候必定要確保編碼格式跟數據真正的格式是一致的
不要騙人家!!!

{"username":"jason","age":25}  
    在request.POST裏面確定找不到
    
    django針對json格式的數據 不會作任何的處理 
    
request對象方法補充
    request.is_ajax()
        判斷當前請求是不是ajax請求 返回布爾值

"""

<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'jason','age':25}),
            contentType:'application/json',  // 指定編碼格式
            success:function () {

            }
        })
    })
</script>

        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)
        
"""
ajax發送json格式數據須要注意點
    1.contentType參數指定成:application/json
    2.數據是真正的json格式數據
    3.django後端不會幫你處理json格式數據須要你本身去request.body獲取並處理
"""

ajax發送文件

"""
ajax發送文件須要藉助於js內置對象FormData

"""
<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>

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自帶的序列化組件(drf作鋪墊)

"""
若是發現你能夠直接使用MySQL可是沒法使用sqlite3
不要慌張不要恐懼 你只須要按照以前MySQL的操做將sqlite3的驅動裝一下便可
"""
# 需求:在前端給我獲取到後端用戶表裏面全部的數據 而且要是列表套字典
import json
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)
    # return render(request,'ab_ser.html',locals())

    # 序列化
    res = serializers.serialize('json',user_queryset)
    """會自動幫你將數據變成json格式的字符串 而且內部很是的全面"""
    return HttpResponse(res)
"""
[
 {"pk": 1, "username": "jason", "age": 25, "gender": "male"}, 
 {"pk": 2, "username": "egon", "age": 31, "gender": "female"},
 {"pk": 3, "username": "kevin", "age": 32, "gender": "others"}, 
 {"pk": 4, "username": "tank", "age": 40, "gender": 4}
 ]
先後端分離的項目
    做爲後端開發的你只須要寫代碼將數據處理好
    可以序列化返回給前端便可 
        再寫一個接口文檔 告訴前端每一個字段表明的意思便可
        
        
[
{   "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

"""
本身要學會如何拷貝
學會基於別人的基礎之上作修改
研究各個參數表示的意思 而後找葫蘆畫瓢
"""
<script>
    $('.del').on('click',function () {
        // 先將當前標籤對象存儲起來
        let currentBtn = $(this);
        // 二次確認彈框
        swal({
          title: "你肯定要刪嗎?",
          text: "你可要考慮清除哦，可能須要拎包跑路哦!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: "btn-danger",
          confirmButtonText: "是的，老子就要刪!",
          cancelButtonText: "算了,算了!",
          closeOnConfirm: false,
          closeOnCancel: false,
          showLoaderOnConfirm: true
        },
        function(isConfirm) {
          if (isConfirm) {
                // 朝後端發送ajax請求刪除數據以後 再彈下面的提示框
                $.ajax({
                    {#url:'/delete/user/' + currentBtn.attr('delete_id'),  // 1 傳遞主鍵值方式1#}
                    url:'/delete/user/',  // 2 放在請求體裏面
                    type:'post',
                    data:{'delete_id':currentBtn.attr('delete_id')},
                    success:function (args) {  // args = {'code':'','msg':''}
                        // 判斷響應狀態碼 而後作不一樣的處理
                        if(args.code === 1000){
                            swal("刪了!", args.msg, "success");
                            // 1.lowb版本 直接刷新當前頁面
                            {#window.location.reload()#}
                            // 2.利用DOM操做 動態刷新
                            currentBtn.parent().parent().remove()
                        }else{
                            swal('完了','出現了位置的錯誤','info')
                        }
                    }

                })

          } else {
            swal("慫逼", "不要說我認識你", "error");
          }
        });
    })

</script>

批量插入

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)
    """
    當你想要批量插入數據的時候 使用orm給你提供的bulk_create可以大大的減小操做時間
    :param request: 
    :return: 
    """
    return render(request,'ab_pl.html',locals())

分頁器.

"""
總數據100 每頁展現10 須要10
總數據101 每頁展現10 須要11
總數據99 每頁展現10  須要10

如何經過代碼動態的計算出到底須要多少頁？


在製做頁碼個數的時候 通常狀況下都是奇數個        符合中國人對稱美的標準
"""
# 分頁
    book_list = models.Book.objects.all()

    # 想訪問哪一頁
    current_page = request.GET.get('page',1)  # 若是獲取不到當前頁碼 就展現第一頁
    # 數據類型轉換
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每頁展現多少條
    per_page_num = 10
    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 終止位置
    end_page = current_page * per_page_num

    # 計算出到底須要多少頁
    all_count = book_list.count()

    page_count, more = divmod(all_count, per_page_num)
    if more:
        page_count += 1

    page_html = ''
    xxx = current_page
    if current_page < 6:
        current_page = 6
    if current_page > 195:
        current_page = 195
    for i in range(current_page-5,current_page+6):
        if xxx == i:
            page_html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
        else:
            page_html += '<li><a href="?page=%s">%s</a></li>'%(i,i)



    book_queryset =  book_list[start_page:end_page]
    
"""
django中有自帶的分頁器模塊 可是書寫起來很麻煩而且功能太簡單
因此咱們本身想法和設法的寫自定義分頁器

上述推導代碼你無需掌握 只須要知道內部邏輯便可

咱們基於上述的思路 已經封裝好了咱們本身的自定義分頁器 
以後須要使用直接拷貝便可
"""