Javascript 多内联问题<；脚本>'；带有输出过滤json的参数的

我是js的新手，我试图在一个受限的教育环境（LMS）中创建一个集中的词汇表，没有数据库或任何可以简化这一过程的东西。我需要在我们的应用服务器上制作一个脚本，可以嵌入到十几门课程中，而学习设计师的要求是在同一页面上可以有两个或更多。术语和定义位于glossary.json中，如下所示：

{
    "a": [
        {
            "module": "1.1",
            "term": "A term in module 1.1",
            "definition": "<p>A definition in 1.1</p>"
        }, {
            "module": "1.2",
            "term": "A term in module 1.2",
            "definition": "<p>A definition in 1.2</p>"
        }
    ]
}

{
“a”：[
{
“模块”：“1.1”，
“术语”：“模块1.1中的术语”，
“定义”：“1.1中的定义”
}, {
“模块”：“1.2”，
“术语”：“模块1.2中的术语”，
“定义”：“1.2中的定义”
}
]
}

我想做的是将课程某一部分的相关术语嵌入到查询参数中，如下所示：

<h2>Module 1.1</h2>
<p>Course content about module 1.1 goes here</p>    
<script src="glossary.js?m=1.1"></script>
    
<h2>Module 1.2</h2>
<p>Course content about module 1.2 goes here</p>  
<script src="glossary.js?m=1.2"></script>

模块1.1
模块1.1的课程内容在此处列出

模块1.2
模块1.2的课程内容在此处列出

glossary.js创建一个id以m参数命名的div，并且应该只输出如下相关术语：

function ajax_get(url, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log(xmlhttp.responseText);
        try {
            var data = JSON.parse(xmlhttp.responseText);
            } catch(err) {
                console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
            callback(data);
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

var script = document.currentScript;
var queryString = script.src.replace(/^[^\?]+\??/,'');
var urlParams = new URLSearchParams(queryString);
var module = urlParams.get('m');

var el = document.createElement("div");
el.setAttribute("id", "glossary"+module);
document.body.appendChild(el);
 
ajax_get('glossary.json', function(data) {
    var html = "<dl>";
    for (var i=0; i < data["a"].length; i++) {
        if (data["a"][i]["module"] == module) {
            html += '<dt>' + data["a"][i]["term"] + '</dt>';
            html += '<dd>' + data["a"][i]["definition"] + '</dd>';
        }
    }
    html += "</dl>";
    el.innerHTML = html;
});

函数ajax\u get（url，回调）{ var xmlhttp=new XMLHttpRequest（）； xmlhttp.onreadystatechange=函数（）{ if（xmlhttp.readyState==4&&xmlhttp.status==200）{ log（xmlhttp.responseText）； 试一试{ var data=JSON.parse（xmlhttp.responseText）； }捕捉（错误）{ log（err.message+“in”+xmlhttp.responseText）； 返回； } 回调（数据）； } }; open（“GET”，url，true）； xmlhttp.send（）； } var script=document.currentScript； var queryString=script.src.replace（/^[^\？]+\？？/，“”）； var urlParams=新的URLSearchParams（queryString）； var module=urlParams.get（'m'）； var el=document.createElement（“div”）； el.setAttribute（“id”、“词汇表”+模块）； 文件.正文.附件（el）； ajax_get（'glossary.json'，函数（数据）{ var html=“”； 对于（变量i=0；i 但是，在上面的示例中，即使脚本被“调用”两次并将创建两个div，它也只会像这样填充最后一个div：

<h2>Module 1.1</h2>
<p>Course content about module 1.1 goes here</p>   
<script src="ajax.js?m=1.1"></script>
<div id="glossary1.1"></div>

<h2>Module 1.2</h2>
<p>Course content about module 1.2 goes here</p>  
<script src="ajax.js?m=1.2"></script>
<div id="glossary1.2">
    <dl>
        <dt>A term in module 1.2</dt>
        <dd><p>A definition in 1.2</p></dd>
    </dl>
</div>

模块1.1
模块1.1的课程内容在此处列出

模块1.2
模块1.2的课程内容在此处列出

模块1.2中的术语
1.2中的定义

---

我就是不能让它工作。为什么在调用JSON之前，每个脚本都乐于自包含呢。我尝试了两种不同的方法来检索JSON内容，但产生了相同的不希望的结果。我有一种感觉，这可能是一件简单的事情，但是任何关于导致它的原因的提示都将非常感谢。

您没有在需要获取

src

的

标记中循环，因此要克服这一问题，一种方法是使用一些
循环
，它将在
脚本
标记中循环，并根据需要进行调整在此基础上执行您的函数。您可以在当前代码中进行更改：

   //get all script tag with src="glossary"
    var scripts = document.querySelectorAll("script[src*='glossary']");
    for (var i = 0; i < scripts.length; i++) {
     if (scripts[i].src) 
    //get parameter
    var urlParams = new URLSearchParams(scripts[i].src.replace(/^[^\?]+\??/, ''));
    var module = urlParams.get('m');
     var el = document.createElement("div");
    el.setAttribute("id", "glossary" + module);
    scripts[i].parentNode.insertBefore(el, scripts[i].nextSibling);
    data_();//call some function to do further process
    }

//使用src=“glossary”获取所有脚本标记
var scripts=document.querySelectorAll（“脚本[src*='glossary']”）；
对于（var i=0；i

演示代码：


//您的数据
风险值数据={
“a”：[{
“模块”：“1.1”，
“术语”：“模块1.1中的术语”，
“定义”：“1.1中的定义”
}, {
“模块”：“1.2”，
“术语”：“模块1.2中的术语”，
“定义”：“1.2中的定义”
}]
}
//使用src=“glossary”获取脚本标记
var scripts=document.querySelectorAll（“脚本[src*='glossary']”）；
//循环通过它
对于（var i=0；i

模块1.1
关于模块1.1的课程内容如下

模块1.2
模块1.2的课程内容如下

您没有在需要获取
src
的
脚本标记中循环，因此要克服这一问题，一种方法是使用一些
循环
，循环将遍历
脚本
标记，并根据这一点执行您的功能。您可以在当前代码中进行更改：

   //get all script tag with src="glossary"
    var scripts = document.querySelectorAll("script[src*='glossary']");
    for (var i = 0; i < scripts.length; i++) {
     if (scripts[i].src) 
    //get parameter
    var urlParams = new URLSearchParams(scripts[i].src.replace(/^[^\?]+\??/, ''));
    var module = urlParams.get('m');
     var el = document.createElement("div");
    el.setAttribute("id", "glossary" + module);
    scripts[i].parentNode.insertBefore(el, scripts[i].nextSibling);
    data_();//call some function to do further process
    }

//使用src=“glossary”获取所有脚本标记
var scripts=document.querySelectorAll（“脚本[src*='glossary']”）；
对于（var i=0；i