Загрузка JSON в переменную JavaScript локально без серверного скрипта? - PullRequest
Новая
       11

Загрузка JSON в переменную JavaScript локально без серверного скрипта?

0 голосов
/ 18 февраля 2012

У меня 41 объект JSON, каждый из которых имеет одинаковую схему.

Эти объекты довольно велики, и поэтому я хотел бы загрузить объект условно в сценарий JavaScript при выборе <option> из меню <select> с id из myPicker.

Пока что я настроил jQuery для обработки изменений в <select>: 

$('#myPicker').change(function() {
    alert('Value change to ' + $(this).attr('value'));
    $('#container').empty();
    init();
});

Функция init() рисует вещи в div, называемые container.

Когда я изменяю myPicker, я хочу, чтобы init() вел себя как init(value), что, в свою очередь, указывает init загрузить один из 41 объектов JSON из файла (на основе value).

Выполняется ли загрузка фрагмента JSON из файла (расположенного на стороне сервера) в этом случае, или мне нужно использовать сценарий на стороне сервера, обрабатывающий представления и ответы Ajax-формы и т. Д.?1025 *

РЕДАКТИРОВАТЬ

Я написал следующий код: 

<script language="javascript" type="text/javascript">

     $(document).ready(function(){
        $('#cellTypePicker').change(function() {
            alert('Value change to ' + $(this).attr('value'));
            $('#container').empty();
            initFromPicker($(this).attr('value'));
        });
     });

     function initFromPicker(name) {
        // pick default cell type from picker, if name is undefined
        if (typeof name === "undefined")
            name = 'AG10803-DS12374';
        var jsonUrl = "file://foo/bar/results/json/" + name + ".json";
        alert(jsonUrl);
        $.ajax({
            url: jsonUrl,
            dataType: 'json',
            success: function(response){
                alert("Success!");
            },
            error: function(xhr, textStatus, errorThrown){
                alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr);
            }
        });
        init(); // refills container...
     }
</script>

<body onload="initFromPicker();">
...

Строка alert("Success!"); никогда не вызывается.

Вместо этого я получаю следующую ошибку: 

Error: error | Error: NETWORK_ERR: XMLHttpRequest Exception 101 | [object Object]

Я проверяю значение jsonUrl, и оно кажется правильным URL.Файл, на который он указывает, присутствует, и у меня есть разрешения на доступ к нему (он находится в моей домашней папке).Есть ли что-то, что я все еще пропускаю?

Ответы [ 2 ]

4 голосов
/ 18 февраля 2012

Позвольте мне убедиться, что я понимаю ваш вопрос. Я думаю, что вы хотите:

  1. есть несколько файлов, которые содержат объекты JSON
  2. в зависимости от того, какая опция выбрана, загружается определенный файл
  3. содержимое файла в формате JSON и
  4. вы хотите иметь возможность использовать объект JSON позже в другом javascript

Если это так, то вам просто нужно сделать что-то вроде: 

$('#myPicker').change(function() {
    $('#container').empty();
    init($(this).val());
});

function init(jsonUrl){
  $.ajax({
    url:      jsonUrl
    dataType: 'json'
    success: function(response){
      // response should be automagically parsed into a JSON object
      // now you can just access the properties using dot notation:
        $('#container').html('<h1>' + response.property + '</h1>');
    }
  });
}




РЕДАКТИРОВАТЬ: исключение 101 означает the requester has asked the server to switch protocols and the server is acknowledging that it will do so [1]. Я думаю, что поскольку вы используете file://foo/bar/..., вам может потребоваться переключить флаг isLocal для функции $.ajax [2], но, честно говоря, я не уверен.

[1] http://en.wikipedia.org/wiki/Http_status_codes#1xx_Informational [2] http://api.jquery.com/jQuery.ajax/

Ниже приведен полный рабочий пример, который извлекает объект JSON из Twitter, поэтому вы должны иметь возможность скопировать / вставить всю вещь в файл, запустить его в браузере и заставить его работать. Если ваш сервер настроен правильно, а ваши файлы .json находятся в document_root и имеют соответствующие разрешения, вы сможете поменять их на URL-адрес Twitter и заставить его работать так же ... 

<!doctype html>
<html>
    <head>
        <title>My Super Rad Answer</title>
    </head>

    <body>
        <form id="my-form">
            <select id="cellTypePicker">
                <option value=''>No Value</option>
                <option value="AG10803-DS12374">AG10803-DS12374</option>
            </select>
        </form>
    </body>

    <!-- Grab the latest verson of jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">

         // Wait until the page is fully loaded
         $(document).ready(function(){
            $('#cellTypePicker').change(function() {

                // Grab the value of the select field
                var name = $(this).val();


                if (!name) {
                  // Make sure it's not null...
                  // This is preferred over using === because if name is 
                  // anything but null, it will return fale
                  name = 'AG10803-DS12374';
                }

                // Right now I'm overwriting this to a resource that I KNOW 
                // will always work, unless Twitter is down.
                //
                // Make sure your files are in the right places with the 
                // right permissions...
                var jsonUrl = "http://api.twitter.com/help/test";

                $.ajax({
                    url: jsonUrl,
                    dataType: 'json',
                    success: function(response){
                        // JSON.stringify takes a JSON object and 
                        // turns it into a string
                        //
                        // This is super helpful for debugging
                        alert(JSON.stringify( response ));
                    },
                    error: function(xhr, textStatus, errorThrown){
                        alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr);
                    }
                });
            });
         });
    </script>
</html>
2 голосов
/ 18 февраля 2012

Вы можете использовать $.ajax() для этого - или один из ярлыков, например, $.getJSON(): 

$.getJSON('somefile', function(data) {
    // here, data is javascript object represented by the json in somefile
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...