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

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

阿新 • • 發佈：2018-12-03

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>

例子展示
這裡寫圖片描述

相關推薦

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

template-native.js幫後臺請求過來的資料渲染在頁面上 話不多說，直接上程式碼。感覺好笨重 ，用慣了vue，再來用這個感覺天塌下來了 自己網上下載一個 template-native.js 其他程式碼直接複製到編輯器即可執行 <html>

js從後臺獲取頁面顯示在頁面上

Controller： public ActionResult Index(string username, string identityid) { ViewBag.Name = username; View

template-native.js模板渲染資料並根據條件渲染

模板的用法 先看幾個語法，反正我是跟看不清，多謝幾層條件感覺要瘋 迴圈<% for(var i = 0; i < target.length; i++){ %><% } %> 顯示<%=target[i].欄位%> 條件&

模板引擎template-native.js傳入的資料中包含HTML標籤，如何讓頁面直接識別標籤而不是顯示在標籤？

輸出的含有標籤如圖想要的結果是：解決方法：<%=#data.title[0]%>在資料data前加   #   就解決了。HTML <pre> 標籤pre 元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為

ajax從後臺請求的資料在顯示時一閃而過的原因（submit）

學習過程中遇到的問題： 先貼程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> function showHint(str) { if (str.le

vue 處理後臺請求json資料，並渲染

後臺傳給前臺的json資料格式，這裡原本只是傳list資料給後臺，因為需要分頁，所以用pageInfo包了一下，成了json格式： { "data": { "endRow": 1, "firstPage": 1, "hasNextPage": false,

前臺js接收後臺的json資料

後臺返回的json資料，如php的： return json_encode($data); 在前臺 js接收如下： function json2object(str){ var jsstr = str.replace(/&quot;/g,'"');

前臺JS獲取後臺的Json資料， 動態建立table並填充資料

原文：http://wkf41068.iteye.com/blog/1188302 mark一下，這個月要用的東西。主要是資料格式要好好看一下，之前發資料的時候就出現過資料型別不匹配導致post失敗 <!-- 測試點選“檢視流程記錄 ”時激發的JS -->

js提交後臺請求的方式

1.1通過設定form action的路徑請求後臺方法  在Structs框架下的一個上傳檔案的例子，前臺html頁面部分程式碼: <form action="Test!UploadFile.action" enctype="multipart/form-data" metho

ajax json js解析後臺傳過來的json格式字串

後臺action部分程式碼: JSONObject object = new JSONObject(); object.put("annualDays", annualDays); object.put("entryDate", entryDate); PrintWrite

Android使用webview控制元件載入本地html，通過Js與後臺Java實現資料的傳遞

1.在佈局檔案中加WebView控制元件，在java中獲取WebView物件。 2.載入本地html檔案。 3.開啟js功能。         webView.getSettings().setJa

js獲取後臺Spring MVC資料

後臺Controller： @HtmlTitle(title = "Statistic") @RequestMapping("/statistic") public String statistic(Model model){ List&l

laravel關於前臺vue結合寫後臺介面拿資料渲染到頁面上的過程（vant時間元件的運用）

先展示下效果圖，要完成的功能就是通過時間篩選功能，查到每個月的交易資料 點選右上角時間篩選 這就是要完成的功能 先引進的vue元件庫的DatetimePicker 時間選擇元件 接下來編寫一個文字框，賦予一個id="time" 還有一個點選事件 @click=

Vue最新版本修改dev-server.js模擬後臺資料請求，配置express

參照了別人寫的記錄一下 最新的vue裡dev-server.js被替換成了webpack-dev-conf.js 因此我們需要找到webpack-dev-conf.js檔案進行修改 在模擬後臺資料的時候直接在webpack-dev-conf.js檔案中修改 第一步，在const portfi

前臺通過js 寫個ajax請求把資料傳給後臺，然後後臺接收到這個資料， 再儲存到資料庫。。

 //前端js操作： function testAjax(){ var url="/testAjaxUrlJson/";//後臺接收處理url var txtContent= "textprm";//傳輸內容;  var objData = [         { name

vue.js中使用vueResource向後臺請求資料時出現跨域訪問失敗的問題

最近學習了vue.js,打算試著寫一個個人部落格的系統，後臺使用的是pyramid框架，資料庫用的是mongoDB。 當我在一個單檔案元件中請求後臺提供的介面時，使用了vueResource提供的this.$http方法 出現了No 'Access-Control-All

Thymleaf js直接獲取後臺傳過來的對象或者對象的屬性

trac ndb gid path try 簡單的 mod js代碼 ack 簡單說明：第一次接觸thymleaf模板，對於thymleaf在js中如何獲取後臺傳遞過來的值，真的挺簡單的，記住就行了 代碼： 後臺代碼： //傳遞一個org對象給jspublic String

c#後臺發post請求獲取資料

C#進階系列——WebApi 介面引數不再困惑：傳參詳解 閱讀目錄 一、get請求 1、基礎型別引數 2、實體作為引數 3、陣列作為引數 4、“怪異”的get請求 二、post請求 1、基礎型別引數

使用js處理後臺返回的Date型別的資料

從後臺返回的日期型別的資料，如果直接在前端進行顯示的話，顯示的就是一個從 1970-01-01 00:00:00到現在所經過的毫秒數，而在大多數業務中都不可能顯示這個毫秒數，大多數都是顯示一個正常的日期格式，所以在這裡，我們使用js對於從後臺返回的Date型別的資料進行處理. 方法一、 co

VUE.JS 使用axios資料請求時資料繫結時 報錯 TypeError: Cannot set property 'xxxx' of undefined 的解決辦法

正常情況下在data裡面都有做了定義 在函式裡面進行賦值 這時候你執行時會發現，資料可以請求到，但是會報錯 TypeError: Cannot set property 'listgroup' of undefined  主要原因是： 在 then的內部不能使用Vue的例項