用jquery讀取外部json文件的相對路徑方法

就像在標題上顯示的一樣，我想用相對路徑方法讀取jquery中的json文件。首先，我是這個工作的開端，這可能是我嘗試的蠢事。用jquery讀取外部json文件的相對路徑方法

我有一個外部的json文件，我想在我的腳本中打開這個文件。由於json文件必須具有外部的，開發後會因某種原因而改變，並且會根據過程經常變化。

這裏是我的json文件。

{ 
    "revisiondate": "21 April 2016", 
    "documentname": "1658MC", 
    "department": "Sales", 
    "description": "Available", 
    "link": "href=1658MC.pdf" 
}, { 
    "revisiondate": "16 April 2016", 
    "documentname": "VCX16B", 
    "department": "Enginnering", 
    "description": "Not Available", 
    "link": "href=VCX16B.pdf" 
}, { 
    "revisiondate": "15 March 2016", 
    "documentname": "AB36F", 
    "department": "Custumer Services", 
    "description": "Not Available", 
    "link": "href=AB36F.pdf" 
}, { 
    "revisiondate": "12 Agust 2016", 
    "documentname": "FC25D", 
    "department": "Technical Support", 
    "description": "Not Available", 
    "link": "href=FC25D.pdf" 
}

而這個JSON文件保存到我的本地文件

C:.......\Desktop\Deneme16\Deneme161.json

要讀取該文件與我的腳本

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    </head> 
    <body> 
     <table id="userdata" border="0.02"> 
       <th>Revision Date</th> 
       <th>Document Name</th> 
       <th>Department </th> 
       <th>Description</th> 
       <th>Link</th>    
     </table> 
    <script>  
    $.ready(function() {  
    myObjects = {}; 
     $.getJSON('deneme16.json', function(data) { 
     myObjects.myJson = data; 
      }); 
    $.each(data.person, function(i, person) { 
       var tblRow = "<tr><td>" + person.revisiondate + 
           "</td><td>" + person.documentname + 
           "</td><td>" + person.department + 
           "</td><td>" + person.description + 
           "</td><td><a target='_blank' href='" 
+ person.link.split('href=')[1] 
+"' >"+person.link.split('href=')[1] 
+"</a></td></tr>" 

       $(tblRow).appendTo("#userdata tbody"); 
      });  

     }); 
    </script> 
    </body> 
    </html>

我怎麼能讀與jQuery這個本地文件？我讀了很多標題，但有些標題在討論ajax.request，有些人在談論parse.jquery，有些人則因爲安全策略而對它進行談論是不可能的。我嘗試了很多東西，最後我決定編寫這些代碼。我很困惑，我想解決這個問題。有人可以解釋問題在哪裏oparete此代碼

來源

2017-03-28 MCoskun60

有你使用getJSON，console.log（data）獲取數據？ –

Surucundeki dosyalara javascript ile erisemezsin。 Guvenlik acigi nedeniyle hemen hemen butun browserlardan kaldirildi。 Ajax ile server'daki dosyalara erisip，JSON.parse（jsonString）seklinde okuyabilirsin。

來源

2017-03-28 13:18:14

Eyvallah。 Bulamadımhiçörnekfelan。 Denicem yinebişeyler。 Sağoltavsiyeniçin。 – MCoskun60

$.ready(function() {  
    myObjects = {}; 

    $.getJSON('deneme16.json', function(data) { 

     myObjects.myJson = data; 

     //you cant acces data outside the getJSON function 
     $.each(data, function(i, person) { 
      var tblRow = "<tr><td>" + person.revisiondate + 
      "</td><td>" + person.documentname + 
      "</td><td>" + person.department + 
      "</td><td>" + person.description + 
      "</td><td><a target='_blank' href='" 
      + person.link.split('href=')[1] 
      +"' >"+person.link.split('href=')[1] 
      +"</a></td></tr>" 

      $("#userdata tbody").append(tblRow); 
     });  
    }); 

});

來源

2017-03-28 13:39:42

首先您的JSON不正確，它應該是一個數組（這是您的情況下，我已經糾正它here），或者它應該只有一個父對象。你有4個父對象。

其次，您錯誤地試圖從您的getJSON請求迭代您的JSON響應。它應該在回調函數內部完成，否則您的迭代代碼將在不等待數據迭代的情況下執行。

檢查下面的代碼片段，它工作。我剛剛打印提取值到控制檯。您可以使用上面的代碼重新格式化以在表格中追加數據。

此外，如果您的本地JSON文件GET請求拋出 '跨起源' 的錯誤，然後嘗試舉辦您的JSON在一些網絡存儲像這樣的 - http://myjson.com

$(document).ready(function(){ 
 
    myObjects = []; 
 
     $.getJSON('https://api.myjson.com/bins/1djve3', function(data) { 
 
     myObjects = Object.values(data); 
 
     console.log("Objects in array " + myObjects.length); 
 
     
 
     $.each(myObjects, function(i, person) { 
 
       
 
       
 
     var $row = $('<tr>'+ 
 
     '<td>'+person.revisiondate+'</td>'+ 
 
     '<td>'+person.documentname+'</td>'+ 
 
     '<td>'+person.department+'</td>'+ 
 
     '<td>'+person.description+'</td>'+ 
 
     '<td>'+person.link.split("=")[1]+'</td>'+ 
 
     '</tr>');  
 

 
$('table> tbody:last').append($row); 
 
       
 
      }); 
 
      }); 
 
     
 

 
     });

table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    </head> 
 
    <body> 
 
     <table id="userdata" border="0.02"> 
 
       <th>Revision Date</th> 
 
       <th>Document Name</th> 
 
       <th>Department </th> 
 
       <th>Description</th> 
 
       <th>Link</th>    
 
     </table> 
 
    <script>  
 
    
 
    </script> 
 
    </body> 
 
    </html>

來源

2017-03-28 13:53:26 mp77

感謝您的糾正。在url上上傳json可以有效地使用，但我無法在小提琴和我的電腦上打開該代碼。 fiddle.net和這個頁面的代碼段有什麼區別？ – MCoskun60

你是什麼意思 - 我沒有把小提琴和我的電腦上的代碼翻過來？ – mp77

我的意思是，它不起作用，因爲它似乎在您的評論。 – MCoskun60

用jquery讀取外部json文件的相對路徑方法

回答

相關問題