从零到精通：打造个性化网页问卷，玩转用户调研

前端

2023-12-26 02:38:18

引言

网页问卷是企业或个人收集用户反馈、进行市场调研、产品测试等目的常用的工具，它方便高效且易于分析。本教程将从零教你如何使用HTML、CSS、JavaScript、Ajax、PHP和MySQL技术来构建一个简单的网页问卷。

运行结果

运行本问卷后，你将看到一个简单的网页，其中包含几个问题和一个提交按钮。当用户回答问题并提交问卷后，结果将存储在数据库中。你可以随时登录系统查看和分析结果。

代码分析

本问卷由三个部分组成：开始部分、中间问卷主体和js代码。

开始部分

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>

中间问卷主体

  <h1>网页问卷设计</h1>
  <form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name">
    <br>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email">
    <br>
    <label for="question1">你最喜欢的颜色是？</label>
    <select name="question1" id="question1">
      <option value="red">红色</option>
      <option value="orange">橙色</option>
      <option value="yellow">黄色</option>
      <option value="green">绿色</option>
      <option value="blue">蓝色</option>
      <option value="indigo">靛色</option>
      <option value="violet">紫色</option>
    </select>
    <br>
    <label for="question2">你最喜欢的动物是？</label>
    <input type="text" name="question2" id="question2">
    <br>
    <label for="question3">你最喜欢的食物是？</label>
    <input type="text" name="question3" id="question3">
    <br>
    <input type="submit" value="提交">
  </form>

js代码

// 获取提交按钮
var submitButton = document.querySelector('input[type="submit"]');

// 为提交按钮添加点击事件监听器
submitButton.addEventListener('click', function(e) {
  // 阻止表单提交
  e.preventDefault();

  // 获取用户输入的数据
  var name = document.querySelector('input[name="name"]').value;
  var email = document.querySelector('input[name="email"]').value;
  var question1 = document.querySelector('select[name="question1"]').value;
  var question2 = document.querySelector('input[name="question2"]').value;
  var question3 = document.querySelector('input[name="question3"]').value;

  // 将数据发送到服务器端
  var data = {
    name: name,
    email: email,
    question1: question1,
    question2: question2,
    question3: question3
  };

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'submit.php', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(data));

  // 监听服务器端的响应
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 服务器端处理成功，显示提示信息
      alert('问卷提交成功！');
    } else {
      // 服务器端处理失败，显示错误信息
      alert('问卷提交失败！');
    }
  };
});