EJS(Embedded JavaScript)是一種使用JavaScript模板引擎的工具,可以將數據通過模板渲染成HTML字符串。在EJS中,我們可以使用JSON(JavaScript Object Notation)格式的數據來對網頁進行渲染,這種方式稱為傳遞JSON。
傳遞JSON需要遵循一定的規則。首先,在EJS模板中,我們需要定義用于渲染的JSON變量。例如:
<% var jsonData = { title: "EJS傳遞JSON", content: "這是一篇介紹EJS傳遞JSON的文章。" } %>
這里我們定義了一個名為jsonData的JSON對象,其中包含了title和content兩個屬性。
接下來,我們可以在模板中使用JSON變量來渲染頁面。例如:
<h1><%= jsonData.title %>></h1> <p><%= jsonData.content %>></p>
在這個例子中,我們使用<%= %>語法將jsonData中的title和content屬性渲染到h1和p標簽中。
需要注意的是,父級變量中不能包含子級屬性。例如:
<% var jsonData = { title: "EJS傳遞JSON", content: "這是一篇介紹EJS傳遞JSON的文章。", author: { name: "小明", age: 18 } } %>
在這個例子中,jsonData中包含了一個名為author的子級屬性。我們無法直接在模板中使用jsonData.author.name或者jsonData.author.age來渲染頁面。解決方法是,在定義JSON變量時,將子級屬性提升為同級屬性。例如:
<% var jsonData = { title: "EJS傳遞JSON", content: "這是一篇介紹EJS傳遞JSON的文章。", authorName: "小明", authorAge: 18 } %> <p>作者:<%= jsonData.authorName %>,<%= jsonData.authorAge %>歲</p>
這里,我們將子級屬性name和age分別改為authorName和authorAge,并將它們提升為同級屬性,使它們可以在模板中被正常渲染。