Question

我正在构建一个有2个要求的网站，该网站不能使用任何后端代码，并且该网站必须根据用户所在国家/地区显示不同的翻译。我通过使用JSON来提取所有数据以及HTML5和Javascript以解决Geolocation来解决这些问题。然而，我似乎陷入了我预期的一个非常简单的障碍：

我正在使用JQuery getScript（）函数将JSON文件加载到页面中，然后使用html（）回显数据，但是这里的代码不起作用：

    <script type="text/javascript">
        $(function() {
            var countryName = 'england'.toLowerCase();  
            $.getScript('elements/'+countryName+'/data/datafile.js', function(data) {
                $('.welcomeOne h1').html(data.dt_welcome[0].Translation);
            });
        });
    </script>

如您所见，文件的路径必须是动态的（否则我只使用标准标记来包含JSON文件）。我没有收到任何错误，但是我在getScript（）的回调中放入的任何内容都没有被执行，我已经测试了文件路径，我可以向你保证它是正确的。

BTW这里是JSON的相关片段（如果它有帮助）

var dt_welcome = [
{"ID":1,"Source":"WELCOME","Characters available":null,"Current Characters":null,"Translation":"WELCOME","Notes":null},
{"ID":2,"Source":"","Characters available":230,"Current characters":210,"Translation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure","Notes":null},
{"ID":3,"Source":"<Image choices to follow>","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":4,"Source":"SEMINAR FINDER","Characters available":null,"Current characters":null,"Translation":"SEMINAR FINDER","Notes":null},
{"ID":5,"Source":"","Characters available":260,"Current characters":234,"Translation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure test test test test test test","Notes":null},
{"ID":6,"Source":"ENTER NOW","Characters available":null,"Current characters":null,"Translation":"ENTER NOW","Notes":null},
{"ID":7,"Source":"<Please put an 'x' in column F if your country stocks any of the below brands>","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":8,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"x","Notes":null},
{"ID":9,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":10,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"x","Notes":null},
{"ID":11,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":12,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"x","Notes":null}];

提前致谢。

Answer 1

移动此

 console.log(data);
                console.log(status);
                $('.welcomeOne h1').html(data.dt_welcome[0].Translation);

到datafile.js，jQuery会自动运行它从服务器获取的内容，如javascript。

修改

 console.log(data);
                console.log(status);
                $('.welcomeOne h1').html(dt_welcome[0].Translation);

Answer 2

查看代码后编辑...

它看起来不像js文件是json格式。你会想要使用：

$.getScript('/[path]/' + language + 'datafile.js', function() {

此外，您的javascript在第187行开头有一些错误。完整的项目符号缺少引号。

您可以使用Firebug（或Chrome或IE）对此进行排查，只需像正常一样包含脚本文件并查找错误。

<script type="text/javascript" src="/[path]/england/datafile.js""></script>

一旦你解决了这两个问题，它似乎工作正常。

Answer 3

如果您不打算在javascript文件中执行任何代码，我会使用getJSON而不是getScript

http://api.jquery.com/jQuery.getJSON/

从datafile.js中删除“var dt_welcome =”并仅返回文字数组。

在对getJSON的调用中，您传递了参数“data”。用它。

   $(function() {
        var countryName = 'england'.toLowerCase();  
        $.getJSON('elements/'+countryName+'/data/datafile.js', function(data) {
            $('.welcomeOne h1').html(data[0].Translation);
        });
    });

尝试使用getScript（）动态加载页面中的脚本

3 个答案: