jquery 手机调查问卷

原创

mob649e815adb02 2023-07-31 13:45:08 ©著作权

文章标签 jQuery 编写代码 HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815adb02的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 手机调查问卷

介绍

调查问卷是一种常用的收集用户反馈和数据的方式。而在现代社会，手机使用越来越普遍，因此将调查问卷移植到手机端是必不可少的。本文将介绍如何使用 jQuery 构建一个简单的手机调查问卷。

准备工作

在开始编写代码之前，我们需要引入 jQuery 库。可以通过以下方式在 HTML 页面中引入 jQuery：

<script src="

构建调查问卷

首先，我们需要创建一个 HTML 表单来收集用户的反馈。以下是一个简单的调查问卷示例：

<form id="surveyForm">
  <h2>手机调查问卷</h2>
  
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" required>
  
  <label for="phone">手机号码：</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required>
  
  <label for="feedback">您对手机的满意度：</label>
  <select id="feedback" name="feedback">
    <option value="1">非常满意</option>
    <option value="2">满意</option>
    <option value="3">一般</option>
    <option value="4">不满意</option>
    <option value="5">非常不满意</option>
  </select>
  
  <input type="submit" value="提交">
</form>

在上述代码中，我们使用了 HTML 表单元素（input、select）来收集用户的反馈。每个表单元素都有一个唯一的 id 属性，以便我们可以使用 jQuery 选择器选择它们。

处理表单提交

当用户提交表单时，我们需要处理表单的提交事件，并获取用户输入的数据。可以通过以下代码来实现：

$(document).ready(function() {
  $('#surveyForm').submit(function(event) {
    event.preventDefault(); // 阻止表单默认的提交行为

    var formData = $(this).serialize(); // 获取表单数据

    // 将表单数据发送到服务器进行处理
    $.ajax({
      type: 'POST',
      url: 'submit.php',
      data: formData,
      success: function(response) {
        alert('提交成功！感谢您的反馈。');
      },
      error: function() {
        alert('提交失败，请稍后再试。');
      }
    });
  });
});

在上述代码中，我们使用了 jQuery 的 submit() 方法来监听表单的提交事件。当用户点击提交按钮时，会触发该事件。通过 preventDefault() 方法阻止表单默认的提交行为，以便我们可以自己处理表单数据。

使用 serialize() 方法可以将表单数据序列化为 URL 编码的字符串。在这个例子中，我们将使用 POST 请求将表单数据发送到服务器，所以将 type 属性设置为 'POST'，url 属性设置为 'submit.php'（你需要根据实际情况修改此处的 URL），data 属性设置为 formData，它包含了表单数据。

如果服务器成功处理了表单数据，success 回调函数将被执行，并显示一个提示框。如果出现了错误，error 回调函数将被执行，并显示一个错误提示框。