jQuery调取jSon数据并展示的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了jQuery调取jSon数据并展示的方法。分享给大家供大家参考。具体如下:

以下代码是将页面中的展示部分

function searchProductlistByfilterCondition(index, type, sort, filterWord) {  

    //cite_html  

    var citem_html = '<div class="citem"><div class="citemtop">'  

                    + '<a href="" target="_blank"><img src="{imgList}" /></a><div class="citemtxt">'  

                    + '<a class="citemtitle" target="_blank" href="">{title}</a><div class="citemtc">'  

                    + '<span class="yy-icon yy-time txtellipsis">{time}</span>'  

                    + '</div></div></div>'  

                    + '<div class="citemqt">'  

                    + '<span class="yy-icon yy-view">{mark}</span> <span class="yy-icon yy-comment">{price}</span>'  

                    + '<a class="yy-icon yy-like" href=""><span>{praise}</span> </a></div>'  

                    + '<div class="citemqt citemfoot"><div class="citemzl"><a class="citemimg" href="">'  

                    + '<img width="24" height="24" src="images/main/1408603734394.jpg" />'  

                    + '<span class="txtellipsis">{user}</span> </a></div>' 

                    + '<span class="fcfiled">( <a target="_blank" href="">转载</a>- <a target="_blank" href="">'  

                    + ' 站酷中国</a> )</span>'  

                    + '<div id="hiddenpopop" class="miniprofile bottom"><div class="mnphead">'  

                    + '<a target="_blank" href="">'  

                    + ' <img src="images/main/author.jpg" width="50" height="50" /></a><div><p>'  

                    + ' <span class="mnpw-1">小海藻</span> <span class="mnpw-2">福建 福州</span> '  

                    + ' <span class="mnpw-3">人气:<span>256</span></span></p><p class="fmbtn mt10">'  

                    + ' <a target="_blank" href="" class="ufmbtn ufocus"><span class="yy-icon yy-ufocicon"></span>'  

                    + ' <span>加关注</span> </a><a target="_blank" href="" class="ufmbtn ml10 ufusm"><span class="yy-icon yy-ufusm">'  

                    + ' </span><span>发私信</span> </a></p></div></div><div class="cb"></div>'  

                    + ' <div class="mnpbody mt10">'  

                    + ' <a target="_blank" href="">'  

                    + ' <img src="images/main/1.jpg" width="105" height="68" />'  

                    + ' </a><a target="_blank" href="">'  

                    + ' <img src="images/main/1.jpg" width="105" height="68" />'  

                    + ' </a><a target="_blank" href="">'  

                    + ' <img src="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程序设计有所帮助。

Javascript 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
简单的三步vuex入门
May 20 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 #Javascript
浅谈Javascript 数组与字典
Jan 29 #Javascript
javascript 数组操作详解
Jan 29 #Javascript
jQuery实现流动虚线框的方法
Jan 29 #Javascript
jquery 设置style:display的方法
Jan 29 #Javascript
jQuery获取样式中颜色值的方法
Jan 29 #Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 #Javascript
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
python妹子图简单爬虫实例
2015/07/07 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
我就是这样学习Python中的列表
2019/06/02 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
pandas 数据类型转换的实现
2020/12/29 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
婚礼秀策划方案
2014/05/19 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
人民检察院起诉书
2015/05/20 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
zabbix配置nginx监控的实现
2022/05/25 Servers