JQuery不加載JSON文本

我對如何使用JavaScript或JQuery加載JSON文本非常陌生。我是JSON的新手。所以我PHP給我，我有存儲圖像的某些部分JSON文字在我的服務器這樣的：JQuery不加載JSON文本

[ 
    [{ 
     "name": "11_by_Shelest.jpg", 
     "imgPath": "img/14567045410.jpg", 
     "Img_ID": "62", 
     "Date_Posted": "2016-02-28 17:09:01" 
    }, { 
     "name": "1227.jpg", 
     "imgPath": "img/14566992060.jpg", 
     "Img_ID": "39", 
     "Date_Posted": "2016-02-28 15:40:06" 
    }] 
]

我希望能夠加載使用jQuery這個JSON文本，我設法拼湊這個函數來加載來自text area輸入字段的腳本。這是我的HTML：

<textarea name="jsonText" rows="5" class="form-control" id="jsonText"></textarea> //JSON is added here and grabbed with JQuery 
<button type="button" class="btn btn-success btn-lg" name="loadImages" id="loadImages">Load Images </button>

這是我的JQuery腳本。

$("#loadImages").click(function(e){ 
    var jsonText = $('#jsonText').val(); 
    var images = JSON.parse(jsonText); 

    //console.log(images); 

     var imgList= []; 
     $.each(images[0], function (name, imgPath) { 
      console.log(name + " " + imgPath); 
      imgList += '<img src= "' + imgPath + '" alt="' + name + '">'; 
     }); 
     $('#imgResult').append(imgList); 

});

但它不適用於我。先進的謝謝您的幫助！

來源

2016-02-29 Abraham A.

什麼是圖像的內容？它應該是JSON文件的路徑，是嗎？ – Cruiser

如果您的JSON字符串位於textarea中，則不需要使用'$ .getJSON'。事實上，這很可能會導致語法錯誤。您發佈的JSON樣本也無效。 –

@Cruiser圖像被解析後是JSON對象。 –

<textarea name="jsonText" rows="5" class="form-control" id="jsonText"> 
     [ 
      [{ 
       "name": "11_by_Shelest.jpg", 
       "imgPath": "img/14567045410.jpg", 
       "Img_ID": "62", 
       "Date_Posted": "2016-02-28 17:09:01" 
      }, { 
       "name": "1227.jpg", 
       "imgPath": "img/14566992060.jpg", 
       "Img_ID": "39", 
       "Date_Posted": "2016-02-28 15:40:06" 
      }] 
     ] 
    </textarea> 
    <button type="button" class="btn btn-success btn-lg" name="loadImages" id="loadImages">Load Images </button> 
    <div id="imgResult"></div> 
    <script> 
     $("#loadImages").click(function(e){ 
      var jsonText = $('#jsonText').val(); 
      var images = JSON.parse(jsonText); 
      var imgList = ''; 
      $.each(images[0], function (id, imgArray) { 
       console.log(imgArray); 
       imgList += '<img src= "' + imgArray.imgPath + '" alt="' + imgArray.name + '">'; 
      }); 
      $('#imgResult').append(imgList); 
     }); 
    </script>

輸出是DIV的兩幅圖像，其中imgResult ID。

JSFiddle Demo

來源

2016-02-29 15:17:55 mitkosoft

嗨，謝謝你的幫助，這就是''這個頁面追加的內容'所以它看起來並沒有傳遞對象的值，而是傳遞了對象本身的值 –

檢查JSFiddle演示：https：// jsfiddle.net/y6d7L0L4/ – mitkosoft

老兄！它瘋了！我複製了你的代碼並試了一下，它不適合我！這是無稽之談！ –

JQuery不加載JSON文本

回答

相關問題