1. 程式人生 > >template-native.js幫後臺請求過來的資料渲染在頁面上

template-native.js幫後臺請求過來的資料渲染在頁面上

template-native.js幫後臺請求過來的資料渲染在頁面上

話不多說,直接上程式碼。感覺好笨重 ,用慣了vue,再來用這個感覺天塌下來了

自己網上下載一個 template-native.js 其他程式碼直接複製到編輯器即可執行

<html>

    <head>
        <title>template-native模板渲染</title>
        <meta charset="UTF-8" />
        <script src="js/template-native.js"
type="text/javascript" charset="utf-8">
</script> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <style type="text/css"> * { padding: 0; margin: 0; } #area ul li { width
: 100%
; height: 75px; background: #1715151a; padding: 10px 10px; margin: 5px; position: relative; overflow: hidden; }
#area ul li .imgs { width: 72px; height: 72px; position: absolute
; top: 3px; left: 5px; border-radius: 100%; }
#area ul li .imgs img { width: 100%; height: 100%; border-radius: 100%; } #area ul li .text { width: 100%; height: 20px; /* background: darkcyan; */ position: absolute; top: 16px; left: 87px } #area ul li .info { width: 100%; height: 20px; /* background: darkcyan; */ position: absolute; top: 50px; left: 87px }
</style> <body> <div id="area"></div> <!--用於存放模版--> <script id="template" type="text/html"> <div> <ul> <% for(i=0;i<list.length;++i)
{%> <li> <div class="imgs"> <img src=<%=list[i].profile_image%> alt="" /> </div> <div class="text"> 標題: <%=list[i].name%> </div> <div class="info"> 內容: <%=list[i].text%> </div> <%}%> </li> </ul> </div> </script> <!--用於渲染模版--> <script> $.ajax({ url: 'https://www.apiopen.top/satinApi?type=1&page=1', type: 'post', cache: false, dataType: 'json', success: function(data) { //免費介面拿到的資料 console.log(JSON.stringify(data)); //幫拿到的資料存在一個變數中 var arr = { list: data.data//至於這裡為什麼是data.data自己訪問一下這個介面看看資料格式即可 } var html = template('template', arr);//arr就是上兩行程式碼建立的 document.getElementById('area').innerHTML = html//渲染到哪個dom中 } }); </script> </body> </html>

例子展示
這裡寫圖片描述