1461451270@qq.com
1461451270@qq.com
  • 发布:2017-04-12 20:58
  • 更新:2017-04-13 09:00
  • 阅读:3797

通过mui ajax如何把一个div内的内容根据数据库数据做循环

分类:MUI
<div class="mui-card">  
    <div class="mui-card-header mui-card-media">  
            <img src="img/face.jpg" />  
             <div class="mui-media-body">  
                小M  
                    <p>发表于 2016-06-30 15:30</p>  
            </div>  
    </div>  
    <div class="mui-card-content" >  
        <img src="../images/yuantiao.jpg" alt="" width="100%"/>  
    </div>  
</div>  

我想把上面的内容根据数据库得数据循环出来,不知道怎么做啊

2017-04-12 20:58 分享
已邀请:
wlclass

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”,其它比如图片如何动态生成,可以举一反三。

  • 1461451270@qq.com (作者)

    大赞,这个后台返回的数据以数组形式存在的话,前台怎么获取并呈现呢

    2017-04-13 09:39

  • 1461451270@qq.com (作者)

    用户名和时间为什么会显示underfined呢,没有出现小A小C啥的

    2017-04-13 09:53

  • 黑色火焰

    回复 1461451270@qq.com:把我写的item.text和item.time改成data[item].text和data[item].time,因为随手写的,没有验证,记成PHP语法了。

    2017-04-13 10:35

  • 黑色火焰

    回复 1461451270@qq.com:怎么构建这个数组,要看你还需要哪些数据。流程:手机首先APP向服务器请求数据,服务器的后端程序(如JAVA、PHP)将数据从数据库中取出,将这些数据转为JSON格式(具体怎样的格式可以自己定义),然后回复给手机。手机收到这些数据后,将他们存入数组,就是我上面写的data这个数组,之后就可以遍历数组然后创建HTML元素了。

    2017-04-13 10:40

  • 1461451270@qq.com (作者)

    感谢!

    2017-04-13 13:15

  • 1461451270@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

  • 1461451270@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

  • 黑色火焰

    回复 1461451270@qq.com:对的,不过还是要用真机调试试才知道整个流程有没有问题。

    2017-04-13 16:50

  • 1461451270@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

  • 黑色火焰

    回复 1461451270@qq.com:非真机调试,是会跨域的,该网页只能访问该网页所属域名或者IP地址下的网页来GET或者POST。真机调试用了h5+,所以不存在跨域问题。

    2017-04-13 17:11

  • 黑色火焰

    回复 1461451270@qq.com:或者你在PHP文件最上方加上

    header("Access-Control-Allow-Origin:*");

    header("Access-Control-Allow-Method:POST,GET");

    也可以允许跨域。

    2017-04-13 17:13

  • 1461451270@qq.com (作者)

    我知道为什么什么数据都没有显示了,因为根本没走success,而走了error,弹出abort,目前正在想办法

    2017-04-13 17:31

  • 1461451270@qq.com (作者)

    大神,有什么指教嘛,摸不着头脑啊

    2017-04-13 17:42

  • 黑色火焰

    回复 1461451270@qq.com:跨域肯定不会回复success的。方法一就是使用真机调试,跨域没问题,直接跨;方法二就是在PHP文件中添加我之前说的内容,允许跨域。

    2017-04-13 17:46

  • 1461451270@qq.com (作者)

    嗯,好的,感谢!世上好人还是多啊,哈哈

    2017-04-13 20:19

要回复问题请先登录注册