ajax獲取數據後怎麼去渲染到頁面？

時間 2019-12-10

標籤 ajax 獲取數據怎麼渲染頁面欄目 Ajax 简体版

原文原文鏈接

關於，這個問題呢！一直沒有在網上找到一個合適答案（可能這問題比較傻，嘿嘿）。今天把本身經常使用幾種方式說下：html

第一種：vue

比較常見的就是直接把字符串拼接，而後插入到元素中。node

var html='<li>' + data.num + '</li><li>' + data.floor + '</li><li>' + data.name + '</li><li>' + data.money + '</li>';

elem.innerHTML=html；

第二種：app

與第一種大體，先建立對象，而後添加到外層對象中框架

var node=document.createElement("LI");

var textnode=document.createTextNode("Water");

node.appendChild(textnode);

document.getElementById("myList").appendChild(node);

第三種：mvvm

能夠用網上mvvm框架，數據綁定好比：angular ,vue等這裏不舉例子了哈哈this

第四種：spa

模板的好比 (template.js)code

我本身寫個小例子，不要噴我啊orm

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="con"></div>
        <script>
            var viewCommand = function() {
                var tpl = {
                    product: ["<div>",
                        "<img src={#srcs#} />",
                        "<p>{#text#}</p>",
                        "</div>"
                    ].join(""),
                    title: [
                        "<div class='title'>",
                        "<div class='main'>",
                        '<h2>{#title#}</h2>',
                        '<p>{#tips#}</p>',
                        "</div>",
                        "</div>",
                    ].join("")
                };
                var html = "";
                var formateString = function(str, obj) {
                    return str.replace(/{\#(\w+)#\}/g, function(match, key) {
                        console.log(match + obj[key])
                        return obj[key];
                    })
                };
                var Action = {
                    create: function(data, view) {
                        if(data.length) {
                            for(var i = 0; i < data.length; i++) {
                                html += formateString(tpl[view], data[i])
                            }
                        } else {
                            html += formateString(tpl[view], data);
                        }
                    },
                    display: function(conta, data, view) {
                        if(data) {
                            this.create(data, view)
                        }
                        document.getElementById(conta).innerHTML = html;
                        html = "";
                    }
                };
                return function excute(msg) {
                    msg.param = toString.call(msg.param) == "[object Array]" ? msg.param : [msg.param];
                    Action[msg.command].apply(Action, msg.param);
                }
            }();
            var tit = {
                tips: "颯颯颯颯是",
                title: "安縣阿薩斯",

            }
            var product = [{
                "srcs": "../images/qq.png",
                "text": "qqqq"
            }, {
                "srcs": "../images/weixin.png",
                "text": "qq"
            }]
            viewCommand({
                command: "create",
                param: [ tit, "title"]
            })

            viewCommand({
                command: "create",
                param: [ product, "product"]
            })
            viewCommand({
                command: "display",
                param: ["con"]
            })
        </script>
    </body>

</html>

轉自：https://www.cnblogs.com/hsp-blog/p/5811478.html