代码之家 › 专栏 › 技术社区 › D4RKCIDE

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

frontend html jquery javascript

D4RKCIDE · 技术社区 · 7 年前

我不熟悉前端和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}">`

单击方法(在 $(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>`);
        });

    });
};

2 回复 | 直到 7 年前

Sarah 7 年前

我在你的代码中看到的问题是:

什么时候? .exp-button 单击 loadLearnMore 函数将为当前页执行 index.html )然后,在执行完这项操作后,您将立即导航到一个新页面(experiment.html),因此,刚刚对页面所做的任何javascript代码更改都不会像现在在新页面上一样可见。

我建议当 EXP按钮 单击后,您首先导航到新页面(例如 experiment.html 并将ID作为参数传递给新页面),然后在该页面上执行javascript/ajax请求。

下面是一些基本的代码来展示它是如何工作的(我知道您是动态生成HTML的,这也可以很好地工作,但我只是硬编码来演示):

index.html(当前页)

<!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>

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>

d3l33t 7 年前

window.location.href= "/experiment.html";

删除此行

在剩余的脚本可以执行之前,您正在离开浏览器。