ajax获取数据后怎么去渲染到页面？

最新推荐文章于 2022-08-30 23:33:57 发布

antuo8190

最新推荐文章于 2022-08-30 23:33:57 发布

阅读量778

点赞数 1

文章标签： javascript 开发工具 ViewUI

原文链接：http://www.cnblogs.com/hsp-blog/p/5811478.html

版权

关于，这个问题呢！一直没有在网上找到一个合适答案（可能这问题比较傻，嘿嘿）。今天把自己常用几种方式说下：

第一种：

比较常见的就是直接把字符串拼接，然后插入到元素中。

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

elem.innerHTML=html；

第二种：

与第一种大致，先创建对象，然后添加到外层对象中

var node=document.createElement("LI");
var textnode=document.createTextNode("Water");

node.appendChild(textnode);

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

第三种：

可以用网上mvvm框架，数据绑定比如：angular ,vue等这里不举例子了哈哈

第四种：

模板的比如 (template.js)

我自己写个小例子，不要喷我啊

<!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

antuo8190

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax获取数据后怎么去渲染到页面？

关于，这个问题呢！一直没有在网上找到一个合适答案（可能这问题比较傻，嘿嘿）。今天把自己常用几种方式说下：第一种：比较常见的就是直接把字符串拼接，然后插入到元素中。 var html='<li>' + data.num + '</li><li>' + data.floor + '</li&g...
复制链接

扫一扫