尝试使用 getScript() 在页面中动态加载脚本

Question

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

我正在使用 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() 回调中放入的任何内容都没有被执行，我已经测试了文件路径，我可以向您保证它是正确的。

顺便说一句，这里是 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

如果您不打算执行 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);
        });
    });

Answer 2

将其

 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 3

查看代码后编辑...

看起来js文件不是json格式。您将需要使用：

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

另外，您的 javascript 从第 187 行开始有一些错误。完整的要点缺少引号。

您可以使用 Firebug（或 Chrome 或 IE）解决此问题，只需像平常一样包含脚本文件并查找错误即可。

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

一旦你解决了这两个问题，看起来效果就很好。