javascript - 使 jsFiddle 代码在 FF 和 Chrome 上运行时遇到问题

标签 javascript html css jsfiddle

我在 jsFiddle 中制作了一个看起来很棒的表格,但是当我将代码复制并粘贴到本地 .html 文件中时,我在运行它时得到一个空白页面。一段时间以来,我一直在寻找解决方案,并且我不断看到有关执行 JS 后页面加载的信息以及有关 $(document).ready 的信息。我是 JS 的新手,所以我有点迷茫。

这是我的 jsFiddle:http://jsfiddle.net/DBF5q/29/

这是我添加代码的 HTML 页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
      <title>Find User</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <style>
         <!-- CSS CODE HERE -->
      </style>
      <script type="text/javascript">
         <!-- JS CODE HERE --->

      </script>
   </head>
   <body>
      <div class="Web_OnlineTools_Table" >
        <table id="contact"></table>
      </div>
   </body>
</html>

非常感谢你们给我的任何解决方案或建议。 谢谢。

最佳答案

问题可能是,在您的 jsfiddle 中,您正在使用 /echo/json/ 服务来模拟 ajax 请求,当您将代码复制到本地系统时,它不会工作。

解决这个问题

您需要使用 ajax 数据创建一个本地文件,例如 data.json

{
    "accounts": [{
        "customerID": "1",
            "firstName": "Test",
            "lastName": "Test",
            "company": "Humber",
            "address": "Canada",
            "postalCode": "L7Y 3F1",
            "phoneNumber": "(905)451-1313"
    }, {
        "customerID": "2",
            "firstName": "Test",
            "lastName": "Test",
            "company": "Humber",
            "address": "Canada",
            "postalCode": "L7Y 3F2",
            "phoneNumber": "(905)451-1312"
    }               
              ]
}

然后像这样更改ajax代码

$(document).ready(function () {
    $.ajax({
        url: "<url-of-the-data.json>",
        datatype: "json"
    }).done(function (data) {
        console.log(data.accounts);
        $('#contact').append('<tr><td>' + "CustomerID" + '</td><td>' + "First Name" + '</td><td>' + "Last Name" + '</td><td>' + "Company" + '</td><td>' + "Address" + '</td><td>' + "Postal Code" + '</td><td>' + "Phone Number" + '</td></tr>');
        $(data.accounts).each(function (index, element) {
            console.log(element);

            $('#contact').append('<tr><td>' + element.customerID + '</td><td>' + element.firstName + '</td><td>' + element.lastName + '</td><td>' + element.company + '</td><td>' + element.address + '</td><td>' + element.postalCode + '</td><td>' + element.phoneNumber + '</td></tr>');
        });
    });
});

演示:Plunker

关于javascript - 使 jsFiddle 代码在 FF 和 Chrome 上运行时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16095125/

相关文章:

php - 在 HTML 中以 SVG 格式显示图像

javascript - jQuery 下拉菜单动画

javascript - 如何更改按钮的样式?

html - 在 flex box 中使用时,网格不占据其 div 的全部高度

javascript - 为什么 YouTube 视频无法加载

html - 由于 z-index,链接不可点击

java - JFoenix 的标准对话框按钮样式

javascript - 检查 JavaScript 中的文件权限

javascript - Javascript 骰子游戏出现问题

javascript - React Router 别名命名路由