靜態網頁輕鬆載入動態資料,讓HTML開發更輕鬆

2021-09-05 17:31:00 字數 1471 閱讀 1157

很多人可能用過vie.js,網頁動態載入資料。一般來說,html在後面呼叫new vue()載入資料的。

vue很有創意,在html中插入}標記,使用html模板化,方便開發。但其也有一定不便。

我受vue啟發,想與jquery結合(我很喜歡jquery)。

我嘗試使用$ajax()載入資料,並把資料顯示到網頁中。

**貨號

} 產品名稱

}

}、}就是引數名,與後台引數旬一致(大小寫敏感)。在visual studio 2016中粉色顯示。

我又寫了一段js函式,用於解析html**中的引數,並替代資料。

string.prototype.view = function (data) }   - 引數名:param,即data.param

// 支援預設值: } ":"後面為預設值(字串,也可為數值)

if (data == undefined)

return this;

else \})/g, // /(\\})/g

matcharr;

var str = this;

var json = json.stringify(data); //json轉字串

while ((matcharr = pattern.exec(str))) }', '');

if (p.length > 0)

try

catch (e)

}});

}return str;

}}

以上**使用正規表示式解析html中}標記的引數,因能力有限,表示式可能有點弱,高手可優化之。

呼叫方法很簡單,就是通過jquery或原生方法,讀取一段html**段,將其中引數標記替換成資料值。

例如,從後台獲取資料為data,在前台頁面獲取**片段為html,則呼叫:html.view(data) 即可。

//前面省略$ajax()**

datatype: "json",

success: function (data) }小計  

}   

}} }

}

然後呼叫(填充**及合計行):

var t = $('#grid_cmp');

//填充**行

fillgridrow(t, $('#zzj_row').html(), data.comps.sj.rows);

//填充合計行

//填充**行的函式

function fillgridrow(grid, tr, rows)

}}

現在我通過靜態網頁,載入後台資料。設計與執行效率都很高。vs的webform和mvc,我沒有使用了。

當然,以上思路與mvc也不謀而合,前後臺開發分離實現。而且,還一樣可用於移動終端h5開發哦!

靜態動態網頁

靜態網頁是相對於動態網頁而言的,是指沒有後台資料庫,不包含程式,不可互動的網頁。靜態網頁的特點 開發人員寫了什麼,顯示就是什麼,一旦編寫完成,就不會有任何改變。靜態網頁一般適用於更新較少的展示型網頁,例如 酒水,家具,水果等宣傳頁 是很多中小 的展示方式。靜態網頁資源對應擴充套件名為 靜態網頁重要特...

靜態網頁和動態網頁

想知道什麼是偽靜態,那麼我們必須知道什麼是靜態和動態的,之前沒有接觸 的時候,認為靜態的就是沒有flash多的頁面,動態的就是有flash的頁面,發現這真是乙個片面的理解,現在才知道這並不是區別靜態和動態的原理,而是通過 來區別的 靜態 是指全部由html 格式頁面組成的 所有的內容包含在網頁檔案中...

靜態網頁與動態網頁

靜態網頁與動態網頁的區別 web伺服器的處理方式不同 一 靜態網頁 不包含任何伺服器端指令碼 伺服器指令碼語言 指在伺服器上執行的指令碼語言,比如php,asp,jsp,也就是後台程式語言。指令碼語言又叫動態語言,是一種程式語言控制軟體應用程式 1 基本概念 靜態網頁也稱為普通網頁,是相對網頁而言的...