jQuery调取jSon数据并展示的方法
本文实例讲述了jQuery调取jSon数据并展示的方法。分享给大家供大家参考。具体如下:
以下代码是将页面中的展示部分
functionsearchProductlistByfilterCondition(index,type,sort,filterWord){ //cite_html varcitem_html='<divclass="citem"><divclass="citemtop">' +'<ahref=""target="_blank"><imgsrc="{imgList}"/></a><divclass="citemtxt">' +'<aclass="citemtitle"target="_blank"href="">{title}</a><divclass="citemtc">' +'<spanclass="yy-iconyy-timetxtellipsis">{time}</span>' +'</div></div></div>' +'<divclass="citemqt">' +'<spanclass="yy-iconyy-view">{mark}</span><spanclass="yy-iconyy-comment">{price}</span>' +'<aclass="yy-iconyy-like"href=""><span>{praise}</span></a></div>' +'<divclass="citemqtcitemfoot"><divclass="citemzl"><aclass="citemimg"href="">' +'<imgwidth="24"height="24"src="images/main/1408603734394.jpg"/>' +'<spanclass="txtellipsis">{user}</span></a></div>' +'<spanclass="fcfiled">(<atarget="_blank"href="">转载</a>-<atarget="_blank"href="">' +'站酷中国</a>)</span>' +'<divid="hiddenpopop"class="miniprofilebottom"><divclass="mnphead">' +'<atarget="_blank"href="">' +'<imgsrc="images/main/author.jpg"width="50"height="50"/></a><div><p>' +'<spanclass="mnpw-1">小海藻</span><spanclass="mnpw-2">福建福州</span>' +'<spanclass="mnpw-3">人气:<span>256</span></span></p><pclass="fmbtnmt10">' +'<atarget="_blank"href=""class="ufmbtnufocus"><spanclass="yy-iconyy-ufocicon"></span>' +'<span>加关注</span></a><atarget="_blank"href=""class="ufmbtnml10ufusm"><spanclass="yy-iconyy-ufusm">' +'</span><span>发私信</span></a></p></div></div><divclass="cb"></div>' +'<divclass="mnpbodymt10">' +'<atarget="_blank"href="">' +'<imgsrc="images/main/1.jpg"width="105"height="68"/>' +'</a><atarget="_blank"href="">' +'<imgsrc="images/main/1.jpg"width="105"height="68"/>' +'</a><atarget="_blank"href="">' +'<imgsrc="images/main/1.jpg"width="105"height="68"/>' +'</a></div></div></div></div>'; $.get('ajax/getProductListByFliterCondition.ashx', {pageIndex:index,Type:type,Sorting:sort,keyWord:filterWord},function(data){ $.each(data.jsona,function(index,elem){ citemHtml+=citem_html.replace('{imgList}',elem.msg_img_list).replace('{title}',elem.msg_title) .replace('{time}',elem.msg_date).replace('{mark}',elem.msg_mark) .replace('{price}',elem.msg_price).replace('{praise}',elem.msg_praise) .replace('{user}',elem.msg_create_user); }) $("#fsD1").after(citemHtml); },'json'); //alert(sort); }
citem_html:页面代码(关键字用特殊符号和文字表示,例如{imgList},(time)等)
$.get():从指定的资源请求数据
第一个参数:jSon插件;第二个参数:json数据格式;第三个参数:function(data)方法,data为取得的json数据串
$.each(data.jsona,function(index,elem))
参数说明:
data.jsona:json数据
function(index,elem):
参数说明:
index:索引
elem:相当于json数据串
此后,将html代码添加到页面中。
此方法的作用:
1、传递参数
2、获取
3、展示
接下来在
$(function(){ //页面初始化调用 searchProductlistByfilterCondition("","","",""); //查询框,关键字查询--调用函数 $('#search').click(function(){ pageIndex=1; searchProductlistByfilterCondition(pageIndex,sortP,typeL,keyWord); }); }
页面js中,调用,只需要将具体的数据对应填上就可以了。
页面中的js作用:
1、绑定
2、赋值
希望本文所述对大家的jQuery程序设计有所帮助。