【Python成長之路】基於Flask框架開發web -- 瞭解jquery，並實現簡單的表格管理平臺（4）

【功能】

上一篇說到要實現“提交”功能，所以這次就來簡單講講。

 

【效果】

【知識點】

1、提交功能的實現，對我來說，最難的是html對前臺數據的傳輸。因此，我就參考着編輯功能，自己一 點點寫。以下是示例代碼：

（1）HTML文件編寫前臺界面提單功能

<script>
		(function(){
            <!--定義屬性是submit的按鈕在點擊後，產生下面的function功能-->
			$('input[type="submit"]').on('click', function(){
                <!--獲取當前行的id -->
                var td = event.srcElement.parentElement;
                var rownum = td.parentElement.rowIndex;
                <!--獲取html表格元素 -->
                var tab = document.getElementById("test");
                <!--將每個單元格元素進行取值，並以字典形式傳給後臺 -->
                var data = {
                    "ID":tab.rows[rownum].cells[0].innerHTML,
                    "網絡IP":tab.rows[rownum].cells[1].innerHTML,
                    "地址":tab.rows[rownum].cells[2].innerHTML,
                    "責任人":tab.rows[rownum].cells[3].innerHTML,
                    "聯繫方式":tab.rows[rownum].cells[4].innerHTML,
                };
                alert("提交成功！")
                $.ajax({
                    type: "get",
                    url: "/edit",
                    data: data,
                    dataType: "json"
                    });
		    });
        })();

（2）後臺對提交後的數據進行讀取，並寫數據庫

@app.route('/edit', methods=['get'])
def edit():
    label = ['ID', '網絡IP', '地址', '責任人', '聯繫方式']
    content = [request.args.get(i) for i in label]
    print(content)
    sql = 'update {0} set {1}="{6}",{2}="{7}",{3}="{8}",{4}="{9}" where {5}={10}'.format('material_table',
          label[1], label[2], label[3],label[4],label[0],content[1],content[2],content[3],content[4],content[0])
    cur = con.cursor()
    cur.execute(sql)
    con.commit()
    return "數據寫入成功！"

在實現“提交”功能時，我主要遇到了以下幾個 坑：

（1）html代碼寫完後，發現程序報錯，提示$.ajax is not a function。我去，我看其他大神的數據交互也是這麼寫的呀，爲什麼我這不行？

查看網上的帖子，都是說未定義或者和其他庫有衝突，最後我自己發現，是因爲我沒有聲明是JQuery。需要在script前面加上一行代碼：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

我理解這行代碼的意思是聲明下面要JQuery庫，而不是其他JS庫。（可能理解有誤）

最後加上這行代碼後，問題成功解決！

（2）獲取當前行號

一開始在獲取行號，怎麼獲取不到，而且不知道要怎麼調試，在同事的指導下，才學會通過alert(td.innerHTML)來查看獲取的當前行內容是什麼。

最初從網上 查到獲取當前行的寫法是：

var td = event.parentElement;
var rownum = td.parentElement.rowIndex;

通過alert調試，發現點擊提交根本沒有反應；又改成

var td = event.srcElement;
var rownum = td.parentElement.rowIndex;

結果是獲取不到任何內容

就這麼個小問題就花費了我近2個小時的時間去不停地查資料，嘗試編寫。最後想說的是，如果對html不熟悉，還是應該找個大神帶帶自己的。

最後在同事的協助下，實現了獲取當前行的功能：

（3）獲取每個表格裏的 內容

tab.rows[0].cells[0].innerHTML

在獲取單元格內數據時，最驗證的是我獲取不到tab，即表格元素。因爲我原先沒有在表格元素里加id，即

網上找了很多方法都沒法實現，最後老老實實地加上 id="test"

 

講道理，html裏的這 20行代碼是我搞這個表格管理平臺時，花費最大精力的。至此，表格管理平臺的功能基本成行 ！