jquery append 在 IE/Firefox 中不工作

Question

我有以下 HTML 和随后的 jQuery 在检索到 Z0ECD11C1D7A287401D148A23BBD 请求之后附加了相关的 HTML 元素。

此实现适用于 Google Chrome + Android 浏览器 + Safari，但不会填充 Firefox 或 Internet Explorer 9 中的数据。

* *适用于 Chrome、Android 浏览器、Firefox 4... 不适用于 Firefox 3.x 和 IE。

Static 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 请求返回两个变量：全名和昵称并已确认

在使用 FireBug 插件的 Firefox 中，我看到了console.log(data)的结果。
在 Chrome 中，我看到了console.log(data)的结果，并且在 JSON 请求之后在 HTML 中成功显示了全名和昵称。

如果有帮助，请使用 jQuery 1.6.1...

JSON Output：

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

Answer 1

我对你在做什么有点困惑。 我认为以下代码：

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

我不知道这是否会解决您的问题，但这肯定会有所改进。

Answer 2

由此产生的问题是由于实际 JSON 数据未在 IE 中检索到。 经过数小时的搜索，问题是XDomainRequest本身不支持 XDomainRequest，特别是在$.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 结果未返回时无效。 感谢大家的帮助和洞察力。

Answer 3

.append()将 HTML 字符串作为参数传递给现有内容的 append。 您可能想要替换元素的文本，使用.text()或.html()代替，具体取决于value变量的内容。

Answer 4

.append(value)不是很安全（例如，如果 value="div"）。
你应该使用.html(value)

Answer 5

data包含什么？ 我认为.append用于 append元素。 如果数据是纯文本，那可能不起作用（实际上没有尝试过）。 Chrome 使用不同的引擎，可能会将文本转换为 DOM 中的文本节点。

使用.text()或.html()设置元素的内容。

Answer 6

作为appendTo的替代方法，也尝试使用.text()