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程序设计有所帮助。