在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面
生活随笔
收集整理的這篇文章主要介紹了
在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
后來查找資料，發(fā)現(xiàn)新增節(jié)點(diǎn)后雖然數(shù)據(jù)加載上去了，但是樣式卻沒有加載上，因此在整個(gè)過程中有2個(gè)注意事項(xiàng)。
1、利用循環(huán)將json動(dòng)態(tài)加到html中
2、動(dòng)態(tài)刷新每個(gè)節(jié)點(diǎn)的樣式。
server.php
<?php //todo:獲取數(shù)據(jù)，轉(zhuǎn)換為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');????????//將節(jié)點(diǎn)樣式刷新});});</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">????????<!--不使用內(nèi)容欄，直接在頁(yè)面中加入列表--></ul> </div> </body> </html>轉(zhuǎn)載于:https://my.oschina.net/u/1778933/blog/489022
總結(jié)
以上是生活随笔為你收集整理的在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle 实现 自增主键功能
- 下一篇： Windows mysql-64位 数据