Javascript 从单页应用程序转换为多页应用程序后未加载数据

我不熟悉前端和web开发，遇到了一个拦截器。我最初将我的网站开发为一个单页应用程序，经过一些反馈后，我决定将其转换为一个多页应用程序。作为一个页面，一切都可以正常工作，但是当我加载与另一个页面相同的HTML时，ajax调用中的数据和我用javascript生成的HTML不会显示出来

相关代码（如果我需要提供更多，请让我知道）

单击此方法生成的

exp按钮后：

let generateCards = function (data) {
    experiments = data;
    data.forEach(element => {
        let end = new Date(element.endDate);
        daysLeft = dateDiffInDays(today(), end);


        if (daysLeft <= 0) {
            daysLeft = "Experiment Ended";
        }

        if (daysLeft === 1) {
            daysLeft = "Ends Today";
        }

        let cardHtml = '<div class="card-container .col-md-4 .offset-md-4">' +
            '<div class="cardImg">' +
            '</div>' +
            '<div class="experiment">' +
            'EXPERIMENT' +
            '</div>' +
            '<div class="experiment-name">' +
            element.title +
            '</div>' +
            '<div class="experiment-description">' +
            element.shortDescription +
            '</div>' +
            '<div class="experiment-time-remaining">' +
            daysLeft + ' days left' +
            '</div>' +
            `<a class="exp-button"  data-experiment="${element.id}">` +
            '<div class="experiment-button">' +
            '<div class="button-text">' +
            'LEARN MORE' +
            '</div>' +
            '</div>' +
            '</a>' +
            '</div>';
        $('#cards-container').append(cardHtml);
    });
};

这将触发此方法，我在尝试的一些配置中遇到了断点，但从未显示数据：

let loadLearnMore = function (id) {
    $.ajax({
        method: "POST",
        url: "http://localhost:55345/api/ExperimentParticipant",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (res) {
        },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        $("#participants").html('');
        $("#participants").append(result);
        experiment = experiments.filter(e => e.id == id);
        $("#days-remain").html('');
        $("#days-remain").append(dateDiffInDays(today(), new Date(experiment[0].endDate)));
        $(".experiment-text-learn").html('');
        $(".experiment-text-learn").append(experiment[0].title);
        $(".about-text").html('');
        $(".about-text").append(experiment[0].longDescription);
        $(".duration-text").html('');
        $(".duration-text").append(longDate(new Date(experiment[0].startDate)) + ' - ' + longDate(new Date(experiment[0].endDate)));
        $('#join-button').attr("data-experiment", id);
        loadRequirements(id);
        loadUpdates(id);
        loadNextStaps(id);

    });
};

前一种方法中使用的其他方法：

let loadNextStaps = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/join/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let steps = (JSON.parse(result));
        let content = '';
        steps.forEach(element => {
            var media;
            content += `<div>${element.number}.&nbsp;&nbsp;${element.step}</div>`;
            if (element.isApp === true) {
                media = element.mediaUrl.split(' ');
                if(media[0] != 'null'){
                    content += `<a href='${element.appleUrl}' target='_blank'><img src='${media[0]}' alt='app store logo'></img></a>`;
                }
                if(media[1] != 'null'){
                    content += `<a href='${element.androidUrl}' target='_blank'><img src='${media[1]}' alt='google play logo'></img></a>`;
                }
            }
        });
        $("#next").html('');
        $("#next").append(content);
    });
};

let loadUpdates = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/updates/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let updates = (JSON.parse(result));
        let content = '';
        updates.forEach(element => {
            content += `<div class='update-time'>${timeSince(element.date)}</div>` + //time since
                `<div class='update-title'>${element.title}</div>` + //title
                "<div class='update-text-container col-md-8'>" +
                "<div class='update-text'>" +
                `${element.content}` + //update content
                "</div>" +
                "</div>";
        });
        $("#profile").html('');
        $("#profile").append(content);
    });
};

let loadRequirements = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/requirements/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let requirements = (JSON.parse(result));
        $('.requiirement-list').html('');
        requirements.forEach(element => {
            $('.requiirement-list').append(`<li class="requiirement-item">${element.content}</li>`);
        });

    });
};

让loadNextStaps=函数（id）{
$.ajax({
方法：“获取”，
url:“http://localhost:55345/api/join/“+id，
数据类型：“json”，
contentType:“应用程序/json”，
成功：函数（res）{}，
错误：函数（数据，错误）{
控制台日志（err）；
}
}).完成（功能（结果）{
让步骤=（JSON.parse（result））；
让内容=“”；
steps.forEach（元素=>{
var媒体；
content+=`${element.number}.${element.step}`；
if（element.isApp==true）{
media=element.mediaUrl.split（“”）；
如果（媒体[0]！='null'）{
内容+=`；
}
如果（媒体[1]！=“空”）{
内容+=`；
}
}
});
$（“#下一步”）.html（“”）；
$（“#下一步”）。追加（内容）；
});
};
让loadUpdates=函数（id）{
$.ajax({
方法：“获取”，
url:“http://localhost:55345/api/updates/“+id，
数据类型：“json”，
contentType:“应用程序/json”，
成功：函数（res）{}，
错误：函数（数据，错误）{
控制台日志（err）；
}
}).完成（功能（结果）{
let updates=（JSON.parse（result））；
让内容=“”；
updates.forEach（元素=>{
content+=`${timeSince（element.date）}`+//自
`${element.title}`+//title
"" +
"" +
`${element.content}`+//更新内容
"" +
"";
});
$（“#profile”）.html（“”）；
$（“#配置文件”）。追加（内容）；
});
};
让loadRequirements=函数（id）{
$.ajax({
方法：“获取”，
url:“http://localhost:55345/api/requirements/“+id，
数据类型：“json”，
contentType:“应用程序/json”，
成功：函数（res）{}，
错误：函数（数据，错误）{
控制台日志（err）；
}
}).完成（功能（结果）{
让需求=（JSON.parse（result））；
$（'.requirement list'）.html（''）；
要求。forEach（元素=>{
$（'.requirement list'）.append（`li class=“requirement item”>${element.content}`）；
});
});
};
window.location.href=“/experience.html”

删除此行

在剩下的脚本可以执行之前，您正在将浏览器导航到别处。
我在代码中看到的问题是：

单击
.exp按钮
时，将对当前页面执行
loadLearnMore
功能（比如它的
index.html
），然后在执行后立即导航到新页面（experience.html）因此，javascript代码对页面所做的任何更改都不会在新页面上显示

我建议单击
.exp按钮时，首先导航到新页面（例如
experience.html
，并将id作为参数传递到新页面），然后在该页面上执行javascript/ajax请求

下面是一些基本的代码来说明它是如何工作的（我知道您正在动态生成html，这也可以很好地工作，但我刚刚硬编码了它来演示）：

index.html（当前页面）

索引页
$（文档）.ready（函数（）{
$（文档）.on（'单击'，'.exp按钮'，函数（事件）{
//event.preventDefault（）；
id=$（this.attr（“数据实验”）；
//导航到experience.html，将id作为参数传递。
window.location.href=“experience.html？id=“+id；
});
});
了解更多

experience.html

实验页
//获取发送的url参数
var urlParams=新的URLSearchParams（window.location.search）；
//获取id参数并将其存储在全局变量中
var id=urlParams.get（'id'）；
console.log（id）；
$（文档）.ready（函数（）{
//使用id参数执行ajax请求。这也可以在loadLearnMore函数中，但出于演示目的，我保留它的基本功能。
$.ajax({
方法：“张贴”，
url:“http://localhost:55345/api/ExperimentParticipant",
数据类型：“json”，
contentType:“应用程序/json”，
数据：JSON.stringify（id），
成功：功能（res）{
},
错误：函数（数据，错误）{
控制台日志（err）；
}
}).完成（功能（结果）{
//现在我们有了数据/结果，我们可以将其插入到当前页面的元素中，如下所示。
$（“#参与者”）.html（“”）；
$（“#参与者”）。追加（结果）；
});
});
一旦导航到新的url或页面被重新加载（使用window.location.href=“/experience.html”）后，将不会执行任何正在运行的javascript。我建议单击.exp按钮时，首先导航到新页面（例如experience.html并将id作为参数传递到新页面），然后在该页面上执行javascript/ajax请求（可以在document.ready函数或window.onload函数中执行，以便在页面加载时执行）
let loadLearnMore = function (id) {
    $.ajax({
        method: "POST",
        url: "http://localhost:55345/api/ExperimentParticipant",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (res) {
        },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        $("#participants").html('');
        $("#participants").append(result);
        experiment = experiments.filter(e => e.id == id);
        $("#days-remain").html('');
        $("#days-remain").append(dateDiffInDays(today(), new Date(experiment[0].endDate)));
        $(".experiment-text-learn").html('');
        $(".experiment-text-learn").append(experiment[0].title);
        $(".about-text").html('');
        $(".about-text").append(experiment[0].longDescription);
        $(".duration-text").html('');
        $(".duration-text").append(longDate(new Date(experiment[0].startDate)) + ' - ' + longDate(new Date(experiment[0].endDate)));
        $('#join-button').attr("data-experiment", id);
        loadRequirements(id);
        loadUpdates(id);
        loadNextStaps(id);

    });
};

let loadNextStaps = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/join/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let steps = (JSON.parse(result));
        let content = '';
        steps.forEach(element => {
            var media;
            content += `<div>${element.number}.&nbsp;&nbsp;${element.step}</div>`;
            if (element.isApp === true) {
                media = element.mediaUrl.split(' ');
                if(media[0] != 'null'){
                    content += `<a href='${element.appleUrl}' target='_blank'><img src='${media[0]}' alt='app store logo'></img></a>`;
                }
                if(media[1] != 'null'){
                    content += `<a href='${element.androidUrl}' target='_blank'><img src='${media[1]}' alt='google play logo'></img></a>`;
                }
            }
        });
        $("#next").html('');
        $("#next").append(content);
    });
};

let loadUpdates = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/updates/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let updates = (JSON.parse(result));
        let content = '';
        updates.forEach(element => {
            content += `<div class='update-time'>${timeSince(element.date)}</div>` + //time since
                `<div class='update-title'>${element.title}</div>` + //title
                "<div class='update-text-container col-md-8'>" +
                "<div class='update-text'>" +
                `${element.content}` + //update content
                "</div>" +
                "</div>";
        });
        $("#profile").html('');
        $("#profile").append(content);
    });
};

let loadRequirements = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/requirements/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let requirements = (JSON.parse(result));
        $('.requiirement-list').html('');
        requirements.forEach(element => {
            $('.requiirement-list').append(`<li class="requiirement-item">${element.content}</li>`);
        });

    });
};

<!DOCTYPE html>
<html>
<head>
<title>Index page</title>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){

  $(document).on('click', '.exp-button', function (event) {
    //event.preventDefault();
    id = $(this).attr("data-experiment");
    //navigate to experiment.html passing the id as a parameter.
    window.location.href= "experiment.html?id=" + id;
  });

});
</script>

</head>
<body>
  <div id="cards-container">
    <a class="exp-button" data-experiment="1">learn more</a>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Experiment page</title>
<script src="jquery.min.js"></script>
<script>
//get the url parameters sent
var urlParams = new URLSearchParams(window.location.search);
//get the id parameter and store it in a global variable
var id = urlParams.get('id');
console.log(id);

$(document).ready(function(){
  //do ajax request with the id parameter. This could also be in a loadLearnMore function but Im keeping it basic for demonstration purposes.
   $.ajax({
        method: "POST",
        url: "http://localhost:55345/api/ExperimentParticipant",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (res) {
        },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
      //now that we have the data/result we can insert it to the elements of the current page that we are on as follows.
      $("#participants").html('');
      $("#participants").append(result);
    });
});
</script>
</head>
<body>
  <div id="participants"></div>

</body>
</html>