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

问题描述

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

相关代码（如果我需要提供更多，请告诉我）。

单击exp-button从此方法生成的：

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);
    });
};

注意我也试过这行代码而不是下面的方法：

`<a class="exp-button" href="experiment.html" onclick=loadLearnMore(${element.id}) data-experiment="${element.id}">`

点击方法（在 a 内$(document).ready(function ()）：

$(document).on('click', '.exp-button', function (event) {
    //event.preventDefault();
    id = $(this).attr("data-experiment");
    loadLearnMore(id);
    window.location.href= "/experiment.html";
});

这应该触发这个方法，我在我尝试的一些配置中打断点，但从来没有显示数据：

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>`);
        });

    });
};

标签： javascriptjqueryhtmlfrontend

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

问题描述

解决方案

推荐阅读