Блог

У меня есть следующий HTML и последующий jQuery, который добавляет связанные HTML-элементы после получения запроса JSON.

Эта реализация работает в Google Chrome браузере Android Safari, но не заполняет данные в Firefox или Internet Explorer 9.

** Работает в Chrome, браузере Android, Firefox 4 … не работает в Firefox 3.x и IE.

Статический HTML:

    <header class=line>
                       <div class="unit size3of4">
                            <h2 class="fullname"></h2>
                            <h4 class="nickname"></h4>
                       </div>
   </header>
  

Код jQuery:

 <script>
function load_user_info() {
        var content_url = 'rest.api.url.com';
        $.getJSON(content_url, {id:'11xx1122xx11'}, function(data){
            console.log(data);
            $.each(data, function(key, value) {
                if (key == "fullname") {$('.fullname').append(value);}
                else if (key == "nickname") {$('.nickname').append(value);}
            });
         });
    }

 load_user_info();
 </script>
  

Немного смущен поведением между браузерами. Я могу гарантировать, что запрос JSON возвращает две переменные: полное имя и псевдоним, и подтвердил это

В Firefox с использованием плагина FireBug я вижу результаты console.log(data) .
В Chrome я вижу результаты console.log(data) и успешное отображение полного имени и псевдонима в HTML после запроса JSON.

Используйте jQuery 1.6.1, если это поможет…

Вывод JSON:

  {"fullname":"johnny fartburger", "nickname":"jf"}
  

Я немного озадачен тем, что вы делаете. Я думаю, что следующий код:

 $.each(data, function (key, value) {
    if (key == "fullname") {
        $('.fullname').append(value);
    } else if (key == "nickname") {
        $('.nickname').append(value);
    }
});
  

могло бы быть проще представлено следующим образом:

 $('.fullname').append(data.fullname);
$('.nickname').append(data.nickname);
  

Я не знаю, решит ли это вашу проблему, но это, безусловно, было бы улучшением.

Возникшая проблема была связана с тем, что фактические данные JSON не извлекались в IE. После долгих часов поиска выяснилось, что проблема заключалась в том, что XDomainRequest изначально jQuery не поддерживается, в частности, в $.getJSON запросе

http://bugs.jquery.com/ticket/8283

В конце я написал try {} catch {} инструкцию, которая проверяет, работает ли $.browser.msie , и если это так, не используйте $.getJSON для извлечения результатов, скорее:

 if ($.browser.msie) {
 var xdr = new XDomainRequest();
 xdr.open('GET', url);
 xdr.onload = function() {
     var data = $.parseJSON(this.responseText);
     show_data(data);                
 }
 xdr.send();
} else {
 $.getJSON(url, function(data){
     show_data(data);
 });
}
  

Итак … заключение append работает в IE (7/8/9) и Firefox (3/4), но не тогда, когда результаты AJAX не возвращаются. Спасибо всем за вашу помощь и понимание.

.append(value) не очень безопасно (например, если значение =»div»).
Вам следует использовать .html(value)

И что data содержит? Я думаю, .append используется для добавления элементов. Если данные представляют собой обычный текст, это может не сработать (на самом деле, не пробовал). Chrome использует другой движок и может преобразовывать текст в textnode в DOM.

Используйте .text() или .html() , чтобы задать содержимое элемента.

в качестве альтернативы appendTo попробуйте также использовать .text()

.append() принимает строку HTML в качестве параметра для добавления к существующему содержимому. Вероятно, вы хотите заменить текст элемента, используйте вместо этого .text() или .html() , в зависимости от содержимого value переменной.