在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面

最新推荐文章于 2022-02-04 12:45:08 发布

dasongbo7290

最新推荐文章于 2022-02-04 12:45:08 发布

阅读量212

点赞数

文章标签： json javascript php ViewUI

原文链接：http://www.cnblogs.com/hcxl/p/8321590.html

版权

后来查找资料，发现新增节点后虽然数据加载上去了，但是样式却没有加载上，因此在整个过程中有2个注意事项。

1、利用循环将json动态加到html中

2、动态刷新每个节点的样式。

server.php

<?php
//todo:获取数据，转换为json
// try{
//     $pdo=new PDO('mysql:host=localhost;dbname=','root','playboy');
//     $sql="select * from user where username=? and password=?";
//     $stmt=$pdo->prepare($sql);
//     $stmt->execute(array($username,$password));
//     echo $stmt->rowCount();

// }catch(PDOException $e){
//     echo $e->getMessage();
// }
//  $pdo=new PDO('mysql:host=localhost;dbname= test_jilv','root','');
$result = array();
try{    
$pdo=new PDO('mysql:host=localhost;dbname=test_jilv','root','playboy');
$pdo->query("set names utf8");

        $sql="select * from my_activity order by id desc";

        $stmt=$pdo->prepare($sql);

        $stmt->execute();

        while($row=$stmt->fetch()){

            $data['title']=$row['title'];
            $data['address']=$row['address'];
            $data['time']=$row['time'];
            //echo json_encode($data);
            $result[] = $data;
            //...
            //...

        }
}catch(PDOException $e){
    echo $e->getMessage();
}
echo json_encode($result);
//echo json_encode($data);

function toUtf($value){
    if($value){
        return icon_to_utf8($value);
    }else{
        return false;
    }
}
?>

2.index,html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewpoint" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<style>
.ui-bar-f
{
color:#30b4ed;
background-color:#30b4ed;
}
.ui-body-f
{
font-weight:bold;
color:#30b4ed;
}
#img{
    margin-top:11px;
    margin-left:3px;
    border-radius:0;
}
</style>
</head>
<body>
<script type="text/javascript">
            $("document").ready(function() {
                var url ="server.php";
                var data={};
                $.getJSON(url,data,function(res){
                            var htmlStr='';
                            for (var i =0; i<res.length; i++) {
                      var o = res[i];
                      htmlStr += '<li>'
                              +  '  <a href="activity_detail.html" data-transition="flip">'
                              +  '    <img src="RAW.PNG"/>'
                              +  '    <h2 id="" name="">' + o['title'] +'</h2>'
                              +  '    <p id="" name="">' + o['address'] +'</p>'
                              +  '    <p id="" name="">' + o['time'] +'</p>'
                              +  '  </a>'
                              +  '</li>';
                    
                    }
                      $('#list').append(htmlStr);
                      $('ul').listview('refresh');        //将节点样式刷新
                    });
              });
        </script>
<div data-role="page" >
    <div data-role="header" data-position="fixed" data-theme="f">
        <h1></h1>
    </div>
        <ul id="list"data-role="listview" data-inset="true">        <!--不使用内容栏，直接在页面中加入列表-->
        
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/hcxl/p/8321590.html

dasongbo7290

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面

后来查找资料，发现新增节点后虽然数据加载上去了，但是样式却没有加载上，因此在整个过程中有2个注意事项。 1、利用循环将json动态加到html中 2、动态刷新每个节点的样式。 server.php <?php//todo:获取数据，转换为json//try{//$pdo=newPDO('mysql:host=localhost;dbna...
复制链接

扫一扫