當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/17 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

后來查找資料，發現新增節點后雖然數據加載上去了，但是樣式卻沒有加載上，因此在整個過程中有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://my.oschina.net/u/1778933/blog/489022

總結

以上是生活随笔為你收集整理的在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。