时间戳

首页 > 解决方案 > 在 REST API 之后将 JavaScript 加载到 HTML

javascript - 在 REST API 之后将 JavaScript 加载到 HTML

问题描述

我正在查看一个较旧的 html/jquery webapp，我需要对其进行更改。编写代码的原始方式是通过 Spring MVC。HTML 页面将调用 Servlet，然后将 HTML 返回给客户端/浏览器。这个“mypage.html”有几个加载的 JS 文件：

            <script src="js/file1.js"></script>
            <script src="js/file2.js"></script>
            <script src="js/file3.js"></script>
            <script src="js/file4.js"></script>

所以当页面返回给浏览器时，HTML页面已经替换了值，然后JS添加了这些知道如何处理数据的脚本。

我替换它的方式，摆脱了 MVC 概念，并以不同的方式处理这个问题。在我的例子中，一个页面在 iFrame 中调用另一个 HTML。加载 iframe 后，它会进行 Ajax/REST 调用以从后端获取数据……因为我们这样做，所以加载了 4 个 javascript 文件，但没有他们需要的数据，因为它还没有，所以我认为它有点竞争​​条件。

所以，如果我做类似的事情......

$.ajax({
        type : 'POST',
        url : api_root + '/backed/api/mydataapi',
        contentType : 'application/json',
        dataType : 'json',
        data : JSON.stringify({
            queryid : queryId,
            token : tokenX
        }),
        success : function(data) {

            data1 = data.environment.data1;
            data2 = data.environment.data2;
            data3 = data.environment.data3;

            <script src="js/file1.js"></script>
            <script src="js/file2.js"></script>
            <script src="js/file3.js"></script>
            <script src="js/file4.js"></script>
        }

我不认为它有效，但这就是我所追求的。如果有更好的方法可以将这些 JS 文件添加到页面，但只有在成功调用 REST 之后。我更像是一个在 Spring 中创建 RESTful API 的后端人员。我不是 javascript 的人，而且已经很多年没有了。我的雇主想在 ReactJS 中重做整个 UI，但我们还没有做到。与此同时，我必须处理这个半过程。

谢谢！

标签： javascriptjqueryajaxrest

解决方案

你可以使用$.getScript().

如果加载顺序很重要，则需要稍微调整一下，因为请求是异步的，并且无法保证完成顺序

 success : function(data) {

        data1 = data.environment.data1;
        data2 = data.environment.data2;
        data3 = data.environment.data3;

       $.getScript("js/file1.js");
       $.getScript("js/file2.js");
       ....
    }

推荐阅读