var data=[{text:"小A",time:"发表于 2016-06-30 15:30"},{text:"小B",time:"发表于 2016-06-30 15:30"},{text:"小C",time:"发表于 2016-06-30 15:30"},{text:"小D",time:"发表于 2016-06-30 15:30"}];
var muiCard=mui(".mui-card")[0];
for(var item in data){
var newDiv=document.createElement("div");
newDiv.setAttribute("class","mui-card-header mui-card-media");
muiCard.appendChild(newDiv);
var newImg=document.createElement("img");
newImg.setAttribute("src","img/face.jpg");
newDiv.appendChild(newImg);
var newDiv_2=document.createElement("div");
newDiv_2.setAttribute("class","mui-media-body");
newDiv_2.innerText=item.text;
newDiv.appendChild(newDiv_2);
var newP=document.createElement("p");
newP.innerText=item.time;
newDiv_2.appendChild(newP);
var newDiv_3=document.createElement("div");
newDiv_3.setAttribute("class","mui-card-content");
muiCard.appendChild(newDiv_3);
var newImg_2=document.createElement("img");
newImg_2.style.width="100%";
newImg_2.setAttribute("src","../images/yuantiao.jpg");
newDiv_3.appendChild(newImg_2);
}
以上代码是随手写的一个例子，楼主可以看下。我写的data变量中的text和time，对应你给的代码中的“小M”和“发表于 2016-06-30 15:30”，其它比如图片如何动态生成，可以举一反三。
2 个回复
wlclass
远程写api接口,
ajax获取数据
回调用模板语法生成html片断
强力插入DOM里面
黑色火焰 - 个人博客：http://blog.luotiankeji.com
var data=[{text:"小A",time:"发表于 2016-06-30 15:30"},{text:"小B",time:"发表于 2016-06-30 15:30"},{text:"小C",time:"发表于 2016-06-30 15:30"},{text:"小D",time:"发表于 2016-06-30 15:30"}];
var muiCard=mui(".mui-card")[0];
for(var item in data){
var newDiv=document.createElement("div");
newDiv.setAttribute("class","mui-card-header mui-card-media");
muiCard.appendChild(newDiv);
var newImg=document.createElement("img");
newImg.setAttribute("src","img/face.jpg");
newDiv.appendChild(newImg);
var newDiv_2=document.createElement("div");
newDiv_2.setAttribute("class","mui-media-body");
newDiv_2.innerText=item.text;
newDiv.appendChild(newDiv_2);
var newP=document.createElement("p");
newP.innerText=item.time;
newDiv_2.appendChild(newP);
var newDiv_3=document.createElement("div");
newDiv_3.setAttribute("class","mui-card-content");
muiCard.appendChild(newDiv_3);
var newImg_2=document.createElement("img");
newImg_2.style.width="100%";
newImg_2.setAttribute("src","../images/yuantiao.jpg");
newDiv_3.appendChild(newImg_2);
}
以上代码是随手写的一个例子，楼主可以看下。我写的data变量中的text和time，对应你给的代码中的“小M”和“发表于 2016-06-30 15:30”，其它比如图片如何动态生成，可以举一反三。
1***@qq.com (作者)
大赞，这个后台返回的数据以数组形式存在的话，前台怎么获取并呈现呢
2017-04-13 09:39
1***@qq.com (作者)
用户名和时间为什么会显示underfined呢，没有出现小A小C啥的
2017-04-13 09:53
黑色火焰
回复 1***@qq.com:把我写的item.text和item.time改成data[item].text和data[item].time，因为随手写的，没有验证，记成PHP语法了。
2017-04-13 10:35
黑色火焰
回复 1***@qq.com:怎么构建这个数组，要看你还需要哪些数据。流程：手机首先APP向服务器请求数据，服务器的后端程序(如JAVA、PHP)将数据从数据库中取出，将这些数据转为JSON格式(具体怎样的格式可以自己定义)，然后回复给手机。手机收到这些数据后，将他们存入数组，就是我上面写的data这个数组，之后就可以遍历数组然后创建HTML元素了。
2017-04-13 10:40
1***@qq.com (作者)
感谢！
2017-04-13 13:15
1***@qq.com (作者)
while($row=mysql_fetch_array($query)){
$array = array("username" => $row['user'],
'title' => $row['title'],
'lastdate' => $row['lastdate']);
echo json_encode($array);
}
这个是我php后端要返回给前端得数据，怎么把它在前台显示成
var data=[{text:"小A",time:"发表于 2016-06-30 15:30"},
{text:"小B",time:"发表于 2016-06-30 15:30"},
{text:"小C",time:"发表于 2016-06-30 15:30"},
{text:"小D",time:"发表于 2016-06-30 15:30"}];
这种形式呢，我是新手，求教！
2017-04-13 15:37
黑色火焰
首先你得传给手机端，确认手机端能收到了吗？我是在PHP中先将要发的数据array转为json字符串(使用json_encode)，然后回复给手机端。手机端再将json字符串使用json.parse(需要json2.js这个库)转为js的对象，也就是data，就可以了。
2017-04-13 16:21
1***@qq.com (作者)
mui.getJSON('http://10.8.12.102:8080/HELLO/admin/messages.php',function(date){
var data=json.parse(date);
是这种形式嘛，我还没有真机调试，只是在本地上
2017-04-13 16:34
黑色火焰
回复 1***@qq.com:对的，不过还是要用真机调试试才知道整个流程有没有问题。
2017-04-13 16:50
1***@qq.com (作者)
正常在本机调试怎么会出现
XMLHttpRequest cannot load http://10.8.12.102:8080/HELLO/admin/messages.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access." /HELLO/message_sub.html (0)这个问题呢，网上查这个提示是说跨域存在问题
实际得页面上什么也没出现，空白的，是不是数据没获取到啊
2017-04-13 17:08
黑色火焰
回复 1***@qq.com:非真机调试，是会跨域的，该网页只能访问该网页所属域名或者IP地址下的网页来GET或者POST。真机调试用了h5+，所以不存在跨域问题。
2017-04-13 17:11
黑色火焰
回复 1***@qq.com:或者你在PHP文件最上方加上
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Method:POST,GET");
也可以允许跨域。
2017-04-13 17:13
1***@qq.com (作者)
我知道为什么什么数据都没有显示了，因为根本没走success，而走了error，弹出abort，目前正在想办法
2017-04-13 17:31
1***@qq.com (作者)
大神，有什么指教嘛，摸不着头脑啊
2017-04-13 17:42
黑色火焰
回复 1***@qq.com:跨域肯定不会回复success的。方法一就是使用真机调试，跨域没问题，直接跨；方法二就是在PHP文件中添加我之前说的内容，允许跨域。
2017-04-13 17:46
1***@qq.com (作者)
嗯，好的，感谢！世上好人还是多啊，哈哈
2017-04-13 20:19