首頁 > web前端 > js教程 > 主體

jQuery調取jSon資料並展示的方法_jquery

WBOY
發布: 2016-05-16 16:17:05
原創
1434 人瀏覽過

本文實例講述了jQuery調取jSon資料並展示的方法。分享給大家供大家參考。具體如下:

以下程式碼是將頁面中的展示部分

複製程式碼 程式碼如下:
function searchProductlistByfilterCondition(index, type, sort, filterWord) { 
    //cite_html 
    var citem_html = '

                    + '

                    + '{title}

                    + '{time}
                    + '

                    + '

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

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

                    + '

                    + '
                    + '


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


                    + '
                    + ' 加关注

                    + '
发私信


                    + '
'; 
    $.get('ajax/getProductListByFliterCondition.ashx', 
     { pageIndex:索引,類型:類型,排序:排序,keyWord:filterWord },函數(資料){ 
         $.each(data.jsona, 函數 (索引, elem) { 
             citemHtml = citem_html.replace('{imgList}', elem.msg_img_list).replace('{title}', elem.msg_title) 
                                                                                                                      }) 
         $("#fsD1").after(citemHtml); 
     }, 'json'); 
    //警報(排序); 
}

citem_html:頁面代碼(關鍵字以特殊符號和文字表示,例如{imgList},(時間)等)
$.get():從指定的資源請求資料
第一個參數:jSon插件;第二個參數:json資料格式;第三個參數:function(data)方法,data用於取得的json資料字串

$.each(data.jsona,function(index,elem))

參數說明:

data.jsona:json資料


函數(索引,元素):
參數說明:

索引:索引

elem:相當於json資料串

此後,將html程式碼加入頁面。

此方法的作用:

1、 提交參數

2、取得

3、展示

接下來


複製程式碼如下程式碼:$(function () {      // 頁面初始化呼叫
    searchProductlistByfilterCondition("", "", "", ""); 
    //查詢框,關鍵字查詢--呼叫函數
    $('#search').click(function () { 
        頁面索引 = 1; 
        searchProductlistByfilterCondition(pageIndex, sortP, typeL, keyWord); 
          }); 
}

頁面js中,調用,只要把具體的資料填入就可以了。
頁中的js作用:
1.綁定 2、屬性


希望本文對大家介紹的 jQuery 程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板