BBS小項目疑問點及解決辦法-B篇（文件閱讀器（onload事件及attr方法）、on和click區別、each方法、ajax展現錯誤信息、static靜態文件）

時間 2019-11-26

標籤 bbs 小項目疑問解決辦法文件閱讀器 onload 事件 attr 方法 click 區別 ajax 展現錯誤信息 static 靜態欄目 Ajax 简体版

原文原文鏈接

6. 文件閱讀器（onload事件以及attr()方法）

'''
應用場景：
    在上傳用戶頭像時，咱們但願在選擇文件後，把當前的文件換成我選中的文件，用到change方法，而後咱們
    須要把選中的文件放到前端頁面中展現出來，因而就應用了文件閱讀器
'''

#文件閱讀器的核心代碼
    $('#myfile').change(function () {
        // 文件閱讀器
        //1 產生一個文件閱讀器對象
        var fileReader = new FileReader(); 
        //2 獲取用戶上傳的文件
        var fileObj = $(this)[0].files[0]; #當前jq對象,[0]取原生js對象，再取文件列表，進而取文件
        //3 讓文件閱讀器讀取該文件
        fileReader.readAsDataURL(fileObj);  // 這一步是異步 提交完以後直接運行下一行
        //4 利用文件閱讀器將文件展現出來
        #此處有一個問題，就是上一步由於是異步，因此有可能還沒徹底讀取文件以後，就執行下一步展現文件信息了，這樣就能夠加onload事件，在頁面徹底加載完（文件讀取完）以後，執行顯示文件操做
        fileReader.onload = function () {
            $('#myimg').attr('src', fileReader.result)
        }
        #這裏加了一個attr方法，就是說，當頁面加載完成以後，會把選擇的文件結果（是個相對路徑),加到myimg標籤的src中,這樣就能實現，選中文件的前端顯示
    });




##############
##onload方法##
##############

'''
用法：
    onload 事件會在頁面或圖像加載完成後當即發生。
    onload 一般用於 <body> 元素，在頁面徹底載入後(包括圖片、css文件等等。)執行腳本代碼。
'''

'''
語法：
    在 HTML 中:<body onload="SomeJavaScriptCode">
    在 JavaScript 中:window.onload=function(){SomeJavaScriptCode};
    
    

參數SomeJavaScriptCode是必需的。規定該事件發生時執行的 JavaScript。
'''

#舉例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試onload</title>
<script>
function myFunction(){
    alert("頁面加載完成");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

#頁面加載完成後，彈窗顯示頁面加載完成，而後顯示hello world!



###########
##attr方法##
###########

'''
用法：
    attr() 方法設置或返回被選元素的屬性值，能夠加一個參數，多個參數，函數等
'''

'''
實例：
    點擊button按鈕，圖片的寬度變爲180
'''
    $("button").click(function(){
      $("img").attr("width","180");
    })
    
詳細介紹請見：
    https://www.w3school.com.cn/jquery/attributes_attr.asp

7. on和click事件的區別

element.click()這種寫法不支持給動態元素或樣式綁定事件。支持給動態元素綁定事件的是.live()和.on()。live在jQquery1.7後就不推薦使用了。使用.on()時注意，on前面的元素必須在頁面加載的時候就存在DOM裏面。css

演示代碼見on和click事件的區別html

8. jq中的each()方法

小例子：前端

var arr=[1,2,3,4];
$.each(arr,function(i,n){
    alert("索引"+i+"對應的值"+n);
});

#這個的意思是說，對arr進行循環遍歷，而後在提示框中打出索引值i 和對應的值n

項目中的例子：python

$.each($('#myform').serializeArray(),function (index,obj) {
            formDataObj.append(obj.name,obj.value)
        });
    
    
#這句話的意思是，首先自動把input框中的輸入數據取到並獲得不一樣的鍵值對的大字典（serializeArray作的事），再對這個字典進行遍歷，遍歷一次，就會在formDataObj中加入一個鍵值對{obj.name:obj.value}

更詳細的介紹在這篇博客裏面====>jQuery中$.each()方法的使用jquery

9. ajax中拿到後臺鉤子函數獲得的錯誤信息並展現的邏輯

##展現錯誤信息

$.each(data.msg,function (index,obj) {
                       # index就是一個個的報錯字段名  obj就是數組 裏面是報錯信息
                       # 手動拼接對應的input框的id值
                        var targetId = '#id_' + index;
                       # $('#id_username') $('#id_password')
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                        ###當前input框的下一個標籤（span）,在裏面把錯誤信息（即數組的第一個值）加進去，再在它的父標籤加一個已經存在錯誤信息的類（用於後面，聚焦該輸入框後，把該類去除掉）
                    })


##取消錯誤信息

 $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
##鼠標聚焦到輸入框，取它下面的span標籤，而後把內容置空，再把父類的錯誤信息類去掉

10.前端靜態文件的導入 settings中的配置

導入本地新建的static文件夾中的靜態文件，須要在settings中進行配置，其實就是加一個路徑，注意，雖然這個配置的名字叫STATICFILES_DIRS，但它是一個列表，不是字典！！！ajax

此外，本地前端導入語句也比較固定，先在settings中配置static的url，確保前端導入時，路徑能夠動態變化，詳細導入語句見下: bootstrap

#settings.py    
    STATIC_URL = '/static/'
    
#html文件
    {% load static %}
    <script src="{% static 'bootstrap/js/jquery.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>