ajax获取数据后怎么去渲染到页面？
Posted hsp大鹏
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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={#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获取数据后怎么去渲染到页面？的主要内容，如果未能解决你的问题，请参考以下文章
layui 利用ajax冲获取到json 数据后 怎样进行渲染