2. 程式人生 > >Ajax獲取 Json文件提取數據

Ajax獲取 Json文件提取數據

阿新 • • 發佈：2017-07-21
insert app ajax play func -1 com line product

摘自

Ajax獲取 Json文件提取數據

1. json文件內容(item.json)

[
  {
    "name":"張國立",
    "sex":"男",
    "email":"[email protected]",
    "url":"./img/1.jpg"
  },
  {
    "name":"張鐵林",
    "sex":"男",
    "email":"[email protected]",
    "url":"./img/2.jpg"
  },
  {
    "name":"鄧婕",
    "sex":"女",
    "email":"[email protected]
/* */", "url":"./img/3.jpg" }, { "name":"張國立", "sex":"男", "email":"[email protected]", "url":"./img/4.jpg" }, { "name":"張鐵林", "sex":"男", "email":"[email protected]", "url":"./img/5.jpg" }, { "name":"鄧婕", "sex":"女", "email":"[email protected]
/* */", "url":"./img/6.jpg" } ]

　　2.發送Ajax請求，獲取Json數據

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <style type="text/css">

        .p1{
            font-size: 14px;
            color: #000;
        }
        .p2{
            font-size: 12px;
            color: #b0b0b0;
        }
        .p3{
            font-size: 14px;
            color: #ff5f19;
        }
        .product{
            width:100%;
            position: relative;
            margin: 20px 0 5px 0;
            height: 100px;
            background: #fafafa;
        }

        .img{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
        }
        .p{
            display:inline-block;
            float:left;
            width:50%;
            margin-top:6px;
            font-family: Microsoft YaHei;
        }
        .p1{
            margin-top:16px;
        }



    </style>
    <script>
        //頁面加載   獲取全部信息
        $(function(){
            $.ajax({
                type: "POST",//請求方式
                url: "item.json",//地址，就是json文件的請求路徑
                dataType: "json",//數據類型可以為 text xml json  script  jsonp
　　　　　　　　　 success: function(result){//返回的參數就是 action裏面所有的有get和set方法的參數
                    addBox(result);
                }
            });
            /*$.get("item.json",function(result){
                //result數據添加到box容器中;
                addBox(result);
            });*/
        });
        function addBox(result){
            //result是一個集合,所以需要先遍歷
            $.each(result,function(index,obj){
                $("#box").append("<div class=‘product‘>"+//獲得圖片地址
                    "<div><img class=‘img‘ src="+obj[‘url‘]+"/></div>"+
                    //獲得名字
                    "<div class=‘p1 p‘>"+obj[‘name‘]+"</div>"+
                    //獲得性別
                    "<div class=‘p2 p‘>"+obj[‘sex‘]+"</div>"+
                    //獲得郵箱地址
                    "<div class=‘p3 p‘>"+obj[‘email‘]+"</div>"+
                    "</div>");
            });
        }
    </script>
</head>
<body>
<!-- 構建裝一個容器 -->
<div id="box">
</div>
</body>
</html>

　　3.運行效果

技術分享

4.文件結構

技術分享

Ajax獲取 Json文件提取數據

相關推薦

Ajax獲取 Json文件提取數據

insert app ajax play func -1 com line product 摘自 Ajax獲取 Json文件提取數據 1. json文件內容(item.json) [ { "name":"張國立", "sex":"男", "

springboot~openfeign從JSON文件讀取數據

path 服務 clas tcl public 運行 ati gis row 對openfeign不清楚的同學可以先看我這篇文章：springboot~openfeign從此和httpClient說再見 對於openfeign來說，幫助我們解決了服務端調用服務端的問題，你

從XML文件和properties文件提取數據

eva rgs src XML throw conf value tle tag XML文檔格式內容如下 <?xml version="1.0" encoding="UTF-8"?> <root> <field type="1"

XML(php中獲取xml文件的方式/ajax獲取xml格式的響應數據的方式)

light art 數據 root xhr htm function 文件的 list 1、XML 格式規範： ① 必須有一個根元素 ② 不可有空格、不可以數字或.開頭、大小寫敏感 ③ 不可交叉嵌套 ④ 屬性雙引號（瀏覽器自動修正成雙引號了） ⑤ 特殊符號要使用實體 ⑥ 註

上傳文件到數據庫和服務器

上傳文件上傳文件我們需要做三步。①在頁面中能選擇文件上傳；②能夠將二進制數據轉為byte數組，然後存入數據庫中，註意數據庫字段的類型；③將文件保存到服務器。 @RequestMapping(value = "/upload") public void upload(UpLoadFile uploadFile

C# 各種導入 Excel 文件的數據的方法總結

占用 guid 保存 null amp nbsp 字符串 count str 在導入之前都需要將上傳的文件保存到服務器，所以避免重復的寫這些代碼，先貼出上傳文件並保存到服務器指定路徑的代碼。 protected void btnImport_Click(object s

C#各種導入Excel文件的數據的方法總結

context tab 過程 all dap 添加列 map lease 內存 在導入前都需要將上傳的文件保存到服務器，所以避免重復的寫這些代碼，先貼出上傳文件並保存到服務器指定路徑的代碼 protected void btnImport_Click(object sen

Windows App開發之文件與數據

了吧 hide asm ber 下拉列表 cached 默認 dev manager 讀取文件和目錄名 這一節開始我們將陸續看到Windows App是如何操作文件的。 在Windows上讀取文件名稱、目錄名 首先我們在XAML中定義一個But

使用文件進行數據存儲四種模式

append 視頻筆記 bsp private 存在 操作模式 mod 如果 tput 視頻筆記： 1.應用包名：唯一標識一個應用 2.使用文件進行數據存儲： （1）Context.MODE_PRIVATE: 默認操作模式，代表該文件是私有數據，只能被應用本身訪問，在該模式

怎麽恢復手機中誤清空的文件 手機數據恢復方法

隨著手機辦公越來越方便快捷化，手機也成為辦公的重要工具，裏面也保存著我們的重要文件數據。當我們在清理手機數據的時候，總是會誤清空手機裏的文件數據，比如上學期間，學習發的各種活動通知和考試安排。這文件被清空，就真的很麻煩。那我們該怎麽恢復手機中被誤刪除的文件呢？ 強力數據恢復軟件是一款

用hibernate把文件存入數據庫（小於64k的文件）

print rac except ktr nat sys this 關閉 package 首先有e:\\a.jpg文件，小於64k 以下是javabean對象代碼 public class fileBean { int id; byte[] file;

ajax訪問json文件緩存問題

ces function cnblogs type success 標記 ucc result color ajax訪問json文件，json文件改動，訪問的時候也不能及時看到改動後的內容。 這是因為瀏覽器緩存的原因。 在這時候就需要清除瀏覽器的緩存或者加上一個標記，讓aj

【discuzX2】/source/class/class_core.php文件中數據庫操作類DB及db_mysql分析

mathjax fetch bus _for pre 影響 str sql_mod 進行 <?php /** * Discuz MySQL 類的支持 程序中一般不直接使用此類,而是使用DB類，DB類對db_mysql類中的方法又進行了二次封裝 * *

將普通的圖像數據制作成類似於MNIST數據集的.gz文件（數據集制作）

lena 文件的 else offset set next ems ons error 做完MNIST數據集的訓練之後，我們想把自己的數據也拿來做一下相關的訓練，那麽如果調用MNIST數據讀取的接口就需要按照他的數據格式來存取數據，首先來看看這個接口（input_data

運用PDO存儲將圖片、音頻文件存入數據庫

Enctype input 接下來 files 字符 put close emp key 在數據庫中創建表格的時候，有一個字段為image，用來保存圖片，那麽其類型就是blob，關於blob，百度百科是這樣描述的 BLOB (binary large object)，二進制

【ArcGIS】文件地理數據庫，個人地理數據庫與ArcSDE的局別

Mybatis mapping文件中 數據封裝類使用內部類

awr map 成員 wrapper color ner 加載 加載器 結果 在一般的應用中，都會采用ORM 將數據庫查出的記錄映射為一個實體類，該實體類我們也一般是一個類寫在在一個類文件中，但有時候我們會使用內部類，這時候mapping文件配置需註意： 假如該類為： co

mysql 導入 csv文件中數據，只能導入第一行

https 之間 提示 文件中 什麽 mysq 是否 workbench kdt 用workbench導入csv數據，只能導入數據的第一行，也就是標註每一列的列名的那一行。但問題是，每次導入完成時，系統提示已經導入了500條記錄(這個文件中的確有500條記錄)，可是刷新數據

XML文件解析數據結構

spa private first nal runtime 兄弟節點 節點 .com 技術分享 最近在解析Android安裝包內經過編譯的二進制XML文件時想在內存中建立起其對應的樹結構。 想了一早晨，思路如下圖。 多叉樹中的每個節點除了有子節點和兄弟節點以外還有一個指針

寫了小工具分享：按關鍵字文件在數據文件中搜索數據行

tor ffi doc qt3 ngx log 文件 cnblogs weibo 瘧鑰磷4cn0g鄧票纖http://t.docin.com/sina_6372016379囊評門3qykd瘓舜戲http://weibo.com/p/1005055850649325妹扯燃3y