我是前端和网络开发的新手,遇到了拦截器。我最初将我的网站开发为单页应用程序,在收到一些反馈后我决定将其转换为多页应用程序。作为单个页面一切正常,但是当我加载与另一个页面相同的 HTML 时,来 self 的 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}. ${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>`);
});
});
};
最佳答案
window.location.href= "/experiment.html";
去掉这一行
在剩下的脚本可以执行之前,您将离开浏览器。
关于javascript - 从单页应用程序转换为多页应用程序后未加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54299466/