获取前端页面数据的技术探讨

本文探讨“怎么获取前端页面的数据”这个问题，重点关注问卷设计环境中的数据获取。

如何获取题目内容和选项

通常情况下，页面中的题目和选项会被组织在特定结构的div元素中。我们可以使用jquery库来遍历这些div元素，并获取其中的内容：

立即学习“前端免费学习笔记（深入）”；

$('.yourdivclass').each(function(index, value) {
  console.log($(this).html());
});

这段代码会遍历页面中所有拥有指定class属性值的div元素，并打印它们的html内容。

保存和提交数据到后台

获取题目和选项数据后，需要对其进行保存和提交。jquery提供了ajax异步提交功能，可以将数据作为json对象发送到后台：

var data = {
  questions: [], // 存放题目数据
  options: [] // 存放选项数据
};

$('.yourdivclass').each(function(index, value) {
  data.questions.push($(this).find('.question').html());
  $(this).find('.options').each(function(i, v) {
    data.options.push($(this).html());
  });
});

$.ajax({
  url: 'yourbackendurl',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(data),
  success: function(response) {
    console.log('Data saved successfully');
  },
  error: function(error) {
    console.log('Error saving data');
  }
});

这段代码遍历题目和选项，将其添加到json对象中，然后通过ajax发送到后台进行处理。在成功的响应中，数据将被保存到数据库。