Подтвердить что ты не робот

Попытка загрузить локальный файл JSON для отображения данных на странице html с помощью JQuery

Привет, Я пытаюсь загрузить локальный файл JSON с помощью JQuery, чтобы показать данные, но я получаю некоторые странные ошибки. Могу ли я знать, как это решить. 
<html>
 <head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        

<script type="text/javascript">
    $(document).ready(function(e) {
    $.getJSON( "priorities.json" , function( result ){
        alert(result.start.count);
    });
});
</script></head>
</html>

Я просто предупреждаю счет данных JSON. Мой JSON файл находится в том же каталоге, где находится этот файл html, и строковый формат JSON показан ниже.

{
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

Имя файла JSON priority.json и ошибка

Невозможно определить приоритеты Sourceerror

4b9b3361

ОТВЕТЫ

Ответ 1

Как API-интерфейс jQuery говорит: "Загружайте JSON-кодированные данные с сервера с помощью HTTP-запроса GET".

http://api.jquery.com/jQuery.getJSON/

Таким образом, вы не можете загрузить локальный файл с этой функцией. Но при просмотре веб-страниц вы увидите, что загрузка файла из файловой системы в javascript очень затруднительна, поскольку в следующем потоке говорится:

Локальный доступ к файлам с помощью javascript

Ответ 2

Из-за проблем с безопасностью (такая же политика происхождения) доступ к локальным файлам для javascript ограничен, если без участия пользователя.

Согласно https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs:

Файл может читать другой файл, только если родительский каталог исходный файл является каталогом предка целевого файла.

Представьте себе ситуацию, когда javascript с веб-сайта пытается украсть ваши файлы в любой точке вашей системы, не зная о. Вам нужно развернуть его на веб-сервере. Или попробуйте загрузить его тегом script. Вот так:

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        
<script type="text/javascript" language="javascript" src="priorities.json"></script> 

<script type="text/javascript">
   $(document).ready(function(e) {
         alert(jsonObject.start.count);
   });
</script>

Ваш файл priority.json:

var jsonObject = {
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

Или объявите функцию обратного вызова на своей странице и оберните ее как метод jsonp:

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js">    </script> 
     <script type="text/javascript">
           $(document).ready(function(e) {

           });

           function jsonCallback(jsonObject){
               alert(jsonObject.start.count);
           }
        </script>

 <script type="text/javascript" language="javascript" src="priorities.json"></script>

Ваш файл priority.json:

jsonCallback({
    "start": {
        "count": "5",
        "title": "start",
        "priorities": [
            {
                "txt": "Work"
            },
            {
                "txt": "Time Sense"
            },
            {
                "txt": "Dicipline"
            },
            {
                "txt": "Confidence"
            },
            {
                "txt": "CrossFunctional"
            }
        ]
    }
    })

Использование тега script является аналогичным методом для JSONP, но при таком подходе он не настолько гибкий. Я рекомендую развернуть его на веб-сервере.

При взаимодействии с пользователем javascript разрешает доступ к файлам. Это случай File API. Используя файл api, javascript может получить доступ к файлам , выбранным пользователем из <input type="file"/>, или удален с рабочего стола на браузер.

Ответ 3

Вы можете просто добавить Javascript файл в свой HTML-код, который объявит ваш объект JSON как переменную. Затем вы можете получить доступ к своим данным JSON из своей глобальной области Javascript, используя data.employees, например.

index.html:

<html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

data.js:

var data = {
  "start": {
    "count": "5",
    "title": "start",
    "priorities": [{
      "txt": "Work"
    }, {
      "txt": "Time Sense"
    }, {
      "txt": "Dicipline"
    }, {
      "txt": "Confidence"
    }, {
      "txt": "CrossFunctional"
    }]
  }
}

Ответ 4

Примеры визуализации d3.js, которые я реплицировал на своей локальной машине.., которые импортируют данные .JSON.. все отлично работает в браузере Mozilla Firefox; и в Chrome я получаю ошибку ограничений кросс-истоков. Странно, как нет проблем с импортом локального файла javascript, но попробуйте загрузить JSON, и браузер нервничает. Там, по крайней мере, должна быть какая-то настройка, позволяющая пользователю перегружать ее, способ блокировки всплывающих окон, но я могу увидеть указание и выбор, чтобы разблокировать их.. нет оснований быть таким оруэллианцем по этому вопросу. Пользователи не должны считаться слишком наивными, чтобы знать, что лучше для них.

Поэтому я предлагаю использовать браузер Firefox, если вы работаете локально. И я надеюсь, что люди не уродят этого и начнут бомбить Mozilla, чтобы обеспечить ограничения кросс-origin для локальных файлов.

Ответ 5

Я попытался бы сохранить мой объект как .txt файл, а затем извлечь его следующим образом:

 $.get('yourJsonFileAsString.txt', function(data) {
   console.log( $.parseJSON( data ) );
 });

Ответ 6

app.js

$("button").click( function() {
 $.getJSON( "article.json", function(obj) {
  $.each(obj, function(key, value) {
         $("ul").append("<li>"+value.name+" age is : "+value.age+"</li>");
  });
 });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tax Calulator</title>
    <script src="jquery-3.2.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <ul></ul>
    <button>Users</button>
<script type="text/javascript" src="app.js"></script>
  </body>
</html>

article.json

{
"a": {
"name": "Abra",
"age": 125,
"company": "Dabra"
},
"b": {
"name": "Tudak tudak",
"age": 228,
"company": "Dhidak dhidak"
}
}

server.js

var http = require('http');
var fs = require('fs');

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/') {
          response.writeHead(200,{"Content-Type":"text/html"});
          fs.createReadStream("./index.html").pipe(response);
  } else if(request.method == 'GET' && request.url == '/jquery-3.2.0.min.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./jquery-3.2.0.min.js").pipe(response);
  } else if(request.method == 'GET' && request.url == '/app.js') {
          response.writeHead(200,{"Content-Type":"text/javascript"});
          fs.createReadStream("./app.js").pipe(response);
  }
  else if(request.method == 'GET' && request.url == '/article.json') {
          response.writeHead(200,{"Content-Type":"text/json"});
          fs.createReadStream("./article.json").pipe(response);
  }
}

http.createServer(onRequest).listen(2341);
console.log("Server is running ....");

Server.js будет запускать простой node http-сервер в локальном для обработки данных.

Примечание не забывайте о библиотеке dd jQuery в структуре папок и соответственно измените номер версии в server.js и index.html. >

Это мой текущий https://github.com/surya4/jquery-json.