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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 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制作静态网站的模板框架(四)
2006/10/09 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python splitlines使用技巧
2008/09/06 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python自动化报告的输出用例详解
2018/05/30 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python如何判断IP地址合法性
2020/04/05 Python
关于青春的演讲稿
2014/05/05 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年维修工作总结
2015/04/25 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
Redis 限流器
2022/05/15 Redis