Question

如标题所示，我想在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，并且由于安全政策，有人谈论它是不可能的。我尝试了很多东西，最后我决定编写代码。我真的很困惑，我想解决这个问题。有人可以解释这个代码的问题在哪里

Answer 1

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

Answer 2

$.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);
        });     
    }); 

});

Answer 3

首先你的JSON是不正确的，它应该是一个数组（这是你的情况。我已经纠正了它here）或它应该只有一个父对象。你有4个父对象。

其次，您错误地尝试从getJSON请求迭代JSON响应。它应该在回调函数内部完成，否则执行迭代代码而不等待数据被迭代。

检查下面的代码段，它正在运行。我刚刚将提取的值打印到控制台。您可以使用上面的代码重新格式化以在表格中附加数据。

，如果你的本地json文件获取请求抛出'Cross origin'错误，那么尝试在这样的网络存储上托管你的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>

使用jquery读取外部json文件的相对路径方法

3 个答案: