首页 > 代码库 > ajax获取数据后怎么去渲染到页面？
ajax获取数据后怎么去渲染到页面？
关于，这个问题呢！一直没有在网上找到一个合适答案（可能这问题比较傻，嘿嘿）。今天把自己常用几种方式说下：
第一种：
比较常见的就是直接把字符串拼接，然后插入到元素中。
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=http://www.mamicode.com/{#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>
我了解大致就这些，大家可以说说自己的，同时欢迎提问题
ajax获取数据后怎么去渲染到页面？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。