2015-06-03 3 views
0

Мой код ниже не извлекает данные из data.js Эта страница отлично работает, когда данные JSON жестко закодированы на странице.getJSON не запрашивает данные

<head> 
    <title>Test Page</title> 
    <script> 
    function jsontest() { 
     var text; 
     $.getJSON("data.js", function(result) { 
      text = result; 
     }); 
     var obj = JSON.parse(text); 
     document.getElementById("content").innerHTML = 
     obj.name + "<br>" + 
     obj.street + "<br>" + 
     obj.phone; 
    } 
    </script> 
</head> 
<body onload="jsontest();"> 
    <h1>Testing Page</h1> 
    <p id="content"></p> 
</body> 

Мои данные выглядит следующим образом

{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"} 

Могу ли я сделать простой nooby ошибку?

+5

Вы заказали пиццу онлайн, и вы едите пиццу, как только вы повесите трубку. Это не работает так, если вы не будете стоять внутри места пиццы с людьми, которые могут читать ваши мысли. Вам нужно дождаться, когда пицца будет представлена ​​вам. AKA, вам нужно подождать, пока вызов Ajax не будет выполнен, прежде чем вы сможете использовать данные. Для этого и нужен обратный вызов. Добро пожаловать в мир асинхронного программирования – epascarello

+3

'getJson' - это вызов ajax, что означает, что код вокруг вызова продолжает работать, даже если данные еще не возвращены. Вам нужно перетащить все содержимое после вызова '.getJson' внутри функции обработчика. Также вам не нужно разбирать json, поскольку он ожидает возвращения типа json, если ваши данные отформатированы правильно и вы передаете правильные заголовки с сервера, на который вы накрыты. См. Документы для ссылки: http://api.jquery.com/jquery.getjson/ – scrappedcola

+0

Если вы вызываете файл 'data.json', и ваш сервер отвечает правильным типом' application/json' типа mime, t используйте 'JSON.parse();', потому что полученные вами данные уже являются объектами json. – DanFromGermany

ответ

2

Первое, что я обратите внимание, что вы используете getJSON в режиме синхронизации. Это не сработает, так как выполняется асинхронно. Вам нужно разместить вашу логику внутри обработчика финишного

function jsontest() { 
    var text; 
    $.getJSON("data.js", function(result) { 
     text = result; 
     var obj = JSON.parse(text); 
     document.getElementById("content").innerHTML = 
     obj.name + "<br>" + 
     obj.street + "<br>" + 
     obj.phone;   
    }); 
} 

В своем коде, к тому времени вы

var obj = JSON.parse(text); 

метод getJSon еще не возвращают так text содержит значение по умолчанию. Он отправляет запрос на сервер и продолжает поток методов, не дожидаясь результата.

Это то, для чего предназначен обработчик: поставить логику, которая должна быть выполнена по завершении запроса.

1

$.getJSON - это асинхронный вызов - поэтому, когда вы пытаетесь запустить JSON.parse вне обратного вызова, он не будет работать, так как вызов все еще продолжается. Перемещение кода на обратный вызов, и вы будете хорошо:

function jsontest() { 
    $.getJSON("data.js", function(result) { 
     var text = result; 

     var obj = JSON.parse(text); 
     document.getElementById("content").innerHTML = 
      obj.name + "<br>" + 
      obj.street + "<br>" + 
      obj.phone; 
    }); 
    //Anything after the `getJSON` call is executed immediately. 
    //$.getJSON is still in progress when these lines are executing 
} 
0

Вы должны поместить свой код внутри обратного вызова, или вы не будете иметь текст вар населенную:

function jsontest() { 
    var text; 
    $.getJSON("data.js", function(result) { 
     text = result; 
     var obj = JSON.parse(text); 
     document.getElementById("content").innerHTML = 
     obj.name + "<br>" + 
     obj.street + "<br>" + 
     obj.phone; 
    }); 

} 
1

Javascript является однопоточным и неблокирующим, в результате, при выполнении вызова ajax счетчик программ будет продолжен. Таким образом будет анализироваться то, что не определено.

Если вы поместите код под обратным вызовом ajax внутри него, он будет работать нормально.

Смежные вопросы