JS模板和JSON資料的結合

2021-09-06 06:15:31 字數 1207 閱讀 8023

web2.0的開發裡, ajax是乙個非常重要的技術. 如果你的**裡沒有點ajax做的東西, 你都不好意思說你是web2.0的**.

使用ajax的時候, 最關心的就是資料傳輸的格式了, 一般來說, 有以下幾種格式:

純文字html**

xmljson

可以說主流的就是上面幾種了. 下面我們來分別分析一下:

純文字使用純文字的格式, 可以傳輸一些message類的文字, 用於在前台頁面顯示. 優點是簡單, 缺點是功能少.

html**

將頁面結構和資料放在一起返回給頁面, 前台拿到後, 可以不需要任何處理就顯示在頁面上, 使用簡單. 優點是無需處理, 缺點是頁面結構和資料都由後台提供, 頁面的結構發生變化後, 需要去改後台指令碼.

xml使用xml作為資料的格式, 結構化非常明顯, 功能更加豐富了, 各種各樣的資料結構都可以支援了. 優點是資料結構化, 缺點是處理繁瑣, 前台使用需要將資料和html結構拼接在一起, 使用比較複雜. 同時, xml本身的缺點是資料量大.

json

json有著和xml一樣的結構化的優勢, 同時由於json沒有關閉標籤的概念, 所以json的資料量比xml小很多. 有統計資料說平均能少46%, 雖然這個數字我不相信, 但是我相信肯定會少很多. 優點是資料結構化, 缺點是前台同樣需要將json裡的資料和頁面結構拼接在一起, 使用比較複雜.

那麼, 雖然xml和json有些優秀的結構化的優勢, 功能會更多的優勢, 可是又有前台難處理的缺點, 該如何取捨呢? 其實, 我們可以換一種思路, 既然問題出在資料和html結構拼接的時候, 一會寫html**, 一會寫資料, 這麼麻煩, 為什麼, 不用模板來替我們做這個事情呢? 哈哈, 我的真正觀點來了, 那就是, 要使用js模板來解決這個問題!

繼續使用json來傳輸資料, 得到資料後, 不直接與html結構結合, 而是通過模板一次性套好頁面, 現在瀏覽器的js引擎都很給力, 所以不會有任何效能問題! 一舉兩得!

這裡只給乙個簡單的例子讓大家看明白即可:

這個例子很簡單, 甚至沒有寫ajax, 但是大家可以用ajax來得到類似movies變數的資料, 然後傳給template, 就可以了. 這樣比起傳html資料, 優勢很明顯:

傳輸的資料量少, 只有json資料.

頁面生成在前台, 修改的時候, 不需要修改和重啟後台程式.

前台處理的時候, 模板成為重點, html結構由模板控制, 修改方便.

js結合json實現ajax簡單例項

前期準備 1 安裝wampserver或者其他相似軟體來搭建本地整合安裝環境,我安裝的是phpstudy 2 html js css等檔案需要放置在phpstudy中的www目錄中,預設執行index頁面 3 bootstrap.css 介面截圖 phpstudy用起來很方便,如果你的電腦沒有安裝過...

js遍歷json資料

w3c dtd xhtml 1.0 transitional en area area left area right class title width 728 height 47 id title img class con class bottom class dh width 712 hei...

JS獲取JSON資料

檢視後台傳回的資料是string型別資料,還是json格式的資料 本身是json型別資料 按object.property形式觀察格式 最好用console.log data 來檢視一下輸出的結果,方便弄清楚格式 用object.property.args來獲取,獲取到的資料內部有不同格式的,需按對...