Question

好的，我正在进行测试，我试图保存用户参加测试后页面的显示方式，以便他们可以在服务器端表上访问它以查看其答案。我看起来并没有真正找到办法做到这一点。这个想法是在用户提交测试后它将显示正确和错误的答案，保存，然后该页面被发送到表格。任何帮助表示赞赏。

如果有人好奇，我的代码是：

function finishTest(){
//There are actually 37 questions on the test so far only included 3
var score = 0;
var totalQuestions = 37;


for(var questionNum = 1; questionNum<=totalQuestions; questionNum++) {
var radios = document.getElementsByName('q'+questionNum);
var uQuestion = document.getElementById("question "+questionNum).innerHTML;
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked && radios[i].value=="1"){

        score++;
        alert(radios.innerHTML);
        radios[i].parentNode.style.backgroundColor = "lawngreen";

        }else if (radios[i].checked && radios[i].value=="0"){


        alert(radios.innerHTML);
       radios[i].parentNode.style.backgroundColor = "orangered";


        }
}
}

score = parseFloat(score*100/totalQuestions).toFixed(1);
alert("You scored "+score+"%");

document.getElementById('finish').style.visibility='hidden';

}

Answer 1

正如lwalden回答的那样，保存用户输入并使用这些值稍后重新填充文档通常是正确的想法，而不是保存和恢复整个文档。这是处理表单和用户输入的基本部分。

只是为了一些乐趣并直接回答您的问题，这是一个基本的例子。同样，这不是处理项目的正确方法。

Live demo here.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div>
    <input type="text" placeholder="type here...">
    <button id="save-btn">Click here to save.</button>
  </div>
  <h1>Saved doc:</h1>
  <iframe id="saved-doc"></iframe>
</body>
</html>

var saveBtn = document.getElementById('save-btn');
saveBtn.addEventListener('click', function() {
  // get value of inputs and add them to the actual elements
  [].forEach.call(document.querySelectorAll('input'), function(input) {
    input.setAttribute('value', input.value);
  });
  // get the document as a string
  var doc = document.documentElement.innerHTML;
  save(doc);
});

// save it however you want, probably ajax request to a server
// in this example, I'm saving it to localStorage
function save(doc) {
  localStorage.doc = doc;
  loadSavedDoc();
}

// loading the saved doc into an iframe
function loadSavedDoc() {
  var savedDoc = document.getElementById('saved-doc');
  savedDoc.contentWindow.document.documentElement.innerHTML = localStorage.doc;
}
loadSavedDoc();

回复您的评论，此示例代码旨在帮助您了解保存和恢复用户输入的信息。在一个真实的项目中，你可能想要在表单中输入命名的输入字段，保存到一个对象，以及一个库/框架，以保持代码的最小化和清洁。

Live demo here.

<input type="text">
<input type="text">
<button id="save-btn">Save</button>
<button id="load-btn">Load</button>

var saveBtn = document.getElementById('save-btn');
var loadBtn = document.getElementById('load-btn');
var textInputs = document.querySelectorAll('input[type="text"]');
saveBtn.addEventListener('click', function() {
  var vals = [];
  [].forEach.call(textInputs, function(input) {
    vals.push(input.value);
  });
  localStorage.vals = JSON.stringify(vals);
});
loadBtn.addEventListener('click', function() {
  JSON.parse(localStorage.vals).forEach(function(val, idx) {
    textInputs[idx].value = val;
  });
});

Answer 2

您希望捕获要保存在对象中并将该对象发送到服务器的所有变量（测试答案，分数，用户名等），而不是保存html页面。

然后，您可以创建一个评论页面，在呈现时会向服务器询问这些详细信息并显示它们。

究竟如何将数据发送到服务器实际上取决于您的服务器和数据库的设置方式。

如何使用javascript保存网页

2 个答案: