在Safari中使用getJSON后构建HTML可行，但在Chrome或Firefox中不行。

Question

在Safari中使用getJSON后构建HTML可行，但在Chrome或Firefox中不行。

3

你好，我是一名新手，正在使用JavaScript和HTML/CSS。

我不明白为什么我的脚本在Safari上能够运行，但在Chrome和Firefox上却不能运行...有什么想法吗？

编辑：在Chrome和Firefox中，ul和li元素都不显示...之前的警告也不起作用。我将检查控制台中的错误并再次编辑帖子。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="patients" style="text-align:center">

        </div>
        <script type="text/javascript">
            $.getJSON("http://www.url.com/json",
                      function(data) {

                      var items = [];
                      alert(data[1].patient);
                      alert(data[1].hr);

                      $.each(data, function(index, val) {
                             items.push('<li id="' + index + '">' + val.patient + '<div style="display: none" id="'+val.patient+'"></div></li>');
                             });

                      $('<ul/>', {
                        'class': 'my-new-list',
                        html: items.join('')
                        }).appendTo('#patients');


                      });
            </script>

    </body>
</html>

- matteosilv

定义“不工作”。你尝试了什么？你得到了什么错误？哪些警报被显示，哪些没有被显示？ - Gerald Versluis

2

我也不知道。你能否更新你的帖子并详细说明“问题”是什么？有什么不起作用的（你期望什么，发生了什么事情）。此外，请选择一个更具描述性的标题。 - Rob W

3

@RobW：你的声望已经足够帮助这个新手了。从这个问题的内容来看，你可以很容易地编辑问题的标题。向新用户提供帮助比仅仅毫不留情地投票并抱怨更积极主动。提供帮助和指导吧。 - Robert Koritnik

2

@user848778：你必须确保我们理解了问题。一个建议是：使用Firebug在FF中检查您的数据，看看您的脚本是否可以无错误地工作。仅仅通过查看您的代码，它肯定应该可以工作。您还可以提供一个JSFiddle，证明您的问题，我们可以运行它并亲自查看并尝试通过示例帮助您解决问题。 - Robert Koritnik

移除 'class' 周围的引号。对象属性名称不应该加上引号。 - Fabrício Matté

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Geuis · Accepted Answer

你需要了解的第一件事是javascript在页面上执行的时间。

因此，在你发布的代码中，浏览器首先加载jquery库。当它遇到你的<script>标签时，就会尝试执行$.getJSON()函数。

在你的脚本中，成功完成json请求后，它会尝试通过向#patients添加生成的html来修改DOM。这并不总是有效，因为你无法保证浏览器已经呈现了#patients。

你应该从将javascript代码包装在只在页面加载后执行的包装器开始。

有几种方法可以做到这一点。这里是jQuery特定的方法，因为这是你正在使用的。

$(document).ready(function(){
    //your code
});

或者：

$(function(){
    //your code
});

原生的JavaScript代码可能会像这样：

document.addEventListener('load', function(){
    //your code
}, false);

我建议使用jQuery方法之一。

另外，一个小技巧是你不需要在script标签中加入type="text/javascript"。所有浏览器都知道script标签意味着javascript。幸运的是，我们已经远离了各种损坏版本的Internet Explorer旧日子。