Home  >  Article  >  Web Front-end  >  jQuery's method of calling jSon data and displaying it_jquery

jQuery's method of calling jSon data and displaying it_jquery

WBOY
WBOYOriginal
2016-05-16 16:17:051394browse

The example in this article describes how jQuery retrieves jSon data and displays it. Share it with everyone for your reference. The details are as follows:

The following code is the display part of the page

Copy code The code is as follows:
function searchProductlistByfilterCondition(index, type, sort, filterWord) { 
    //cite_html 
    var citem_html = '

                    + '

                    + '{title}

                    + '{time}
                    + '

                    + '

                    + '{mark} {price}
                    + '{praise}

                    + '
'
                    + '( 转载-
                    + ' 站酷中国
)

                    + '

                    + '
                    + '


                    + ' 小海藻 福建 福州
                    + ' 人气:256


                    + '
                    + ' 加关注

                    + '
发私信


                    + '
'; 
    $.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程序设计有所帮助。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn