如何从上下文路径获取javascript文件名并动态加载答案

【问题标题】：how to get javascript file names from context path and load it dynamically如何从上下文路径获取javascript文件名并动态加载
【发布时间】：2023-03-22 12:17:01
【问题描述】：

我正在开发 struts 应用程序，在该应用程序中，在菜单选择中，我在 ajax 调用上返回一个 jsp 并将其附加到容器中。它工作正常，但我还想为该 jsp 加载 javascript。

我正在使用下面的代码，请指导我如何在ajax成功时动态加载js文件：

function openPage( action ) {

showLoader( "Loading..." );
var url = getContextPath() + action;
$.ajax({
    url:url,
    cache: false,
    processData: false,
    contentType:'application/x-www-form-urlencoded',
    type: 'POST',
    success: function ( thePage ) {
        var pathToJSFiles = getContextPath() + "/WEB-INF/js" + action.substring(0, action.indexOf("/",2));
        // (/projectname/web-inf/js/clientregistration/...(2, 3, 4 javascript files here))

        // how to load above javascript files along with (the jsp page : thePage )
        
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = "";
        document.getElementById("thePageContainer").innerHTML = thePage;
        window.parent.parent.scrollTo(0,0);
        hideLoader();
        $("#thePageContainer").fadeIn();
        

    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = thrownError;
        hideLoader(); 
    }
});

}

函数getContextPath()返回上下文路径：/projectName

//returns context path
function getContextPath() {
    return window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
}

jsp加载时要加载的文件：

期待您的回复。

谢谢！

【问题讨论】：

什么是getContextPath()？我完全不明白这一点。页面本身需要负责加载其 JS。
@DaveNewton 更新了问题，并发布了答案。 getContextPath() 只返回项目上下文路径

标签： javascript jquery struts2-jquery

【解决方案1】：

我通过在成功中添加函数 loadJSFiles 来解决这个问题，如下所示：

function openPage( action ) {

showLoader( "Loading..." );
var url = getContextPath() + action;
$.ajax({
    url:url,
    cache: false,
    processData: false,
    contentType:'application/x-www-form-urlencoded',
    type: 'POST',
    success: function ( thePage ) {
        
        loadJSFiles( action );
        
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = "";
        document.getElementById("thePageContainer").innerHTML = thePage;
        window.parent.parent.scrollTo(0,0);
        hideLoader();
        $("#thePageContainer").fadeIn();

    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = thrownError;
        hideLoader(); 
    }
}); 
}

函数 loadJSFiles：

function loadJSFiles(action) 
{
    //action url looks like: /clientRegistration/ClientRegistrationAction.action
    //where clientRegistration is the same name as folder of js files
    //i use it as folder, make a relevant path like /js/clientRegistration/clientregistrationMaintenance.js
    // and load it like below
    var packageAsFileNamePrefix = action.substring(0, action.indexOf("/",2));
    var maintenanceJsFilePath = "js" + packageAsFileNamePrefix + packageAsFileNamePrefix + "Maintenance.js";
    var listJsFilePath = "js" + packageAsFileNamePrefix + packageAsFileNamePrefix + "List.js";

    var jsFiles = [ maintenanceJsFilePath, listJsFilePath ];

    for(var i = 0; i < jsFiles.length; i++ )
    {
        var fileName = jsFiles[i];
        $.getScript( fileName ).done(function( script, textStatus ) {
          console.log( fileName + " loaded!" );
        })
        .fail(function( jqxhr, settings, exception ) {
          alert( "Failed to load JS file: " + fileName );
        });
    }
}

【讨论】：