通过 AJAX 加载页面时输出 Javascript 变量答案

【问题标题】：Output Javascript variable when page loads through AJAX通过 AJAX 加载页面时输出 Javascript 变量
【发布时间】：2014-03-15 02:47:14
【问题描述】：

我有一个测验，每个问题使用 AJAX 在 div 中重新加载，而不是刷新整个页面。

我有一个变量quizScore 保存用户的分数。

在最后一次按下按钮时，页面questionendQuiz.php 被加载到我的quizWrapper。

我想将分数输出到名为scoreout的跨度中

<span id="scoreOut"></span>

我尝试使用getElementById

document.getElementById("scoreout").value = quizScore;

问题是，当页面通过 AJAX 加载时，它不会运行。于是我尝试将其绑定到AJAX页面加载成功：

$( document ).ajaxComplete(function( event,request, settings ) {
  document.getElementById("scoreout").value = quizScore;  
});

因此，当运行该脚本的页面时，它应该运行并输出分数，但它似乎不起作用。

您可以在此处查看该网站：http://fh80.student.eda.kent.ac.uk/fyp-assets/quiz/quiz.php

【问题讨论】：

标签： javascript ajax

【解决方案1】：

.value 用于<input> 标签等表单元素。对于 div 或 span 或其他类型的 HTML 元素，您应该使用 .innerHTML。

document.getElementById("scoreout").innerHTML = quizScore;

至于时间问题，您只需要在scoreout DOM 对象在页面中并且quizScore 处于其当前值之后执行此语句。这不会将quizScore 的值永久绑定到 DOM 元素，它只是一次值的传输。您必须随时重新运行此语句才能显示新更改的分数。

如果您通过 ajax 调用更新此分数，您可以使用 .ajaxComplete() 在任何 ajax 调用完成后更新分数，或者您可以在计算新的分数后立即更新代码中的分数显示更新的分数（无论是在您的代码中）。

【讨论】：

【解决方案2】：

我查看了您的网站。为了让它工作，你应该改变你的nextQuestion函数并像这样添加if(buttonID ...：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById("quizWrapper").innerHTML=xmlhttp.responseText;
    if (buttonID == "question_endQuiz") {
        document.getElementById("scoreOut").innerHTML = quizScore;
    }
}

它还应该是“scoreOut”而不是“scoreout”，因为 javascript 区分大小写。

【讨论】：