第十六篇开发网页教学：表单提交与表格数据展示_静态网站表单提交与查看方法-CSDN博客

本文链接：https://blog.csdn.net/qq_17416973/article/details/149026955

引言

在 Web 应用开发过程中，表单提交与表格数据展示是极为常见且重要的功能。表单提交能够实现用户与服务器之间的数据交互，表格数据展示则可以清晰、有序地呈现各类信息。本文将基于 Visual Studio 开发环境，详细讲解如何实现这两大功能，并深入解析其中的技术要点。

一、创建 Web 项目

（一）新建项目

打开 Visual Studio，点击 “创建新项目”。在项目模板选择界面，找到 “ASP.NET Web 应用程序（.NET Framework）” 选项，点击 “下一步”。在配置新项目窗口，设置项目名称（例如 “FormAndTableDemo”）、项目路径以及解决方案名称，完成后点击 “创建”。在弹出的 “创建ASP.NET Web 应用程序” 窗口中，选择 “空” 模板，并勾选 “Web Forms”，随后点击 “创建”，这样一个基础的 Web 项目便创建完成。

（二）项目结构介绍

项目创建成功后，其文件夹内会包含多个文件与文件夹：

App_Data：用于存储应用程序数据，比如数据库文件等。
Controllers：若选择 MVC 模板，该文件夹用于存放处理业务逻辑的控制器类。
Models：在 MVC 模板下，用于定义数据模型类。
Views：同样是 MVC 模板中，存放视图文件，用于展示数据。
wwwroot：此文件夹用于存放静态文件，像 HTML、CSS、JavaScript 文件以及图片等资源，后续我们的主要操作将围绕该文件夹展开。

在 “解决方案资源管理器” 中，右键点击 “wwwroot” 文件夹，选择 “添加”->“新建项”，在弹出的对话框中选择 “HTML 页面”，命名为 “index.html”，该文件将作为我们实现功能的主页面。

二、表单提交功能实现

（一）HTML 搭建表单结构

打开 “index.html” 文件，输入以下 HTML 代码搭建表单：

<!DOCTYPE html>

<head>

<title>表单提交与表格展示</title>

</head>

<body>

</form>

</body>

</html>

上述代码解释：

<!DOCTYPE html>声明文档类型为 HTML5。
<html>标签是 HTML 页面的根元素，lang="zh-CN"指定页面语言为中文。
<head>部分包含元数据，如字符编码<meta charset="UTF-8">、响应式设置<meta name="viewport" content="width=device-width, initial-scale=1.0">，以及通过<link>标签引入外部 CSS 样式表 “styles.css”（目前该文件尚未创建，后续将编写）。
<body>部分创建了一个<form>表单，id="userForm"为表单指定唯一标识，method="post"设置表单提交方式为 POST（相较于 GET，POST 方式更适合提交敏感或大量数据）。表单内包含用户名和邮箱的输入框，以及提交按钮，required属性确保这些字段为必填项。

（二）JavaScript 处理表单提交

在 “wwwroot” 文件夹下，右键点击，选择 “添加”->“新建项”，选择 “JavaScript 文件”，命名为 “script.js”。打开 “script.js” 文件，输入以下代码：

const userForm = document.getElementById('userForm');

userForm.addEventListener('submit', function (e) {

e.preventDefault(); // 阻止表单默认提交行为

const username = document.getElementById('username').value;

const email = document.getElementById('email').value;

// 模拟向服务器发送数据，实际开发中需使用AJAX或Fetch API

console.log(`提交的用户名：${username}，邮箱：${email}`);

// 这里可以添加实际发送数据到服务器的代码

// 例如使用Fetch API：

// fetch('submit.php', {

// method: 'post',

// headers: {

// 'Content-Type': 'application/x-www-form-urlencoded'

// },

// body: `username=${username}&email=${email}`

// })

//.then(response => response.text())

//.then(data => {

// if (data ==='success') {

// alert('提交成功');

// } else {

// alert('提交失败');

// }

// })

//.catch(error => {

// console.error('Error:', error);

// });

});

上述代码解释：

首先通过document.getElementById('userForm')获取 HTML 中的表单元素。
使用addEventListener方法监听表单的 “submit” 提交事件，当事件触发时，e.preventDefault()用于阻止表单的默认提交行为（即页面刷新跳转），以便进行自定义的逻辑处理。
获取用户名和邮箱输入框的值，并通过console.log在控制台输出（实际开发中，应将数据发送至服务器，代码中注释部分展示了使用 Fetch API 发送数据到服务器的示例）。

（三）CSS 美化表单

在 “wwwroot” 文件夹下，右键点击，选择 “添加”->“新建项”，选择 “样式表”，命名为 “styles.css”。打开 “styles.css” 文件，输入以下代码：

form {

width: 300px;

margin: 0 auto;

padding: 20px;

background-color: #f9f9f9;

border: 1px solid #ccc;

border-radius: 5px;

}

label {

display: block;

margin-bottom: 5px;

}

input {

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 3px;

}

input[type="submit"] {

background-color: #007BFF;

color: white;

cursor: pointer;

}

input[type="submit"]:hover {

background-color: #0056b3;

}

上述代码为表单、标签、输入框和提交按钮设置了样式，包括表单的宽度、边距、背景色，输入框的尺寸、边框，以及提交按钮的背景色和鼠标悬停效果，使表单在页面上呈现出更好的视觉效果。

三、表格数据展示功能实现

（一）HTML 创建表格结构

在 “index.html” 文件的<form>表单之后，添加以下代码创建表格：

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

上述代码创建了一个包含表头和表体的 HTML 表格，表头定义了三列，分别为序号、用户名和邮箱，表体部分将用于动态添加数据。

（二）JavaScript 动态填充表格数据

在 “script.js” 文件中，添加以下代码用于动态填充表格数据：

// 模拟从服务器获取的数据

const userData = [

{ id: 1, username: 'user1', email: 'user1@example.com' },

{ id: 2, username: 'user2', email: 'user2@example.com' },

{ id: 3, username: 'user3', email: 'user3@example.com' }

];

const dataTable = document.getElementById('dataTable');

const tbody = dataTable.querySelector('tbody');

userData.forEach((user, index) => {

const row = document.createElement('tr');

const idCell = document.createElement('td');

const usernameCell = document.createElement('td');

const emailCell = document.createElement('td');

idCell.textContent = index + 1;

usernameCell.textContent = user.username;

emailCell.textContent = user.email;

row.appendChild(idCell);

row.appendChild(usernameCell);

row.appendChild(emailCell);

tbody.appendChild(row);

});

上述代码解释：

首先定义了一个模拟的用户数据数组userData，包含多个用户的信息。
通过document.getElementById('dataTable')获取 HTML 中的表格元素，再通过querySelector('tbody')获取表格的表体部分。
使用forEach循环遍历userData数组，为每个用户数据创建一行表格行<tr>，并为每行创建三个单元格<td>，分别填充序号、用户名和邮箱数据，最后将每行添加到表体中，实现表格数据的动态展示。

（三）CSS 美化表格

在 “styles.css” 文件中，添加以下代码美化表格：

table {

border-collapse: collapse;

width: 100%;

}

th, td {

border: 1px solid #ccc;

padding: 8px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

上述代码设置了表格的边框合并、宽度，以及表头和单元格的边框、内边距、文本对齐方式和表头背景色，使表格更加美观、易读。

四、技术要点解析

（一）表单提交方式选择

HTML 表单提交有 GET 和 POST 两种主要方式：

GET 方式：提交的数据会附加在 URL 后面，以 “? 参数名 = 参数值” 的形式呈现，数据长度有限且不安全，适合提交非敏感、少量的数据，如搜索关键词。
POST 方式：数据通过请求体发送，不会显示在 URL 中，安全性较高，且能提交大量数据，适用于登录、注册、表单提交等场景。在实际开发中，应根据数据的性质和需求合理选择提交方式。

（二）AJAX 与 Fetch API

在实现表单数据提交到服务器时，AJAX（Asynchronous JavaScript and XML）和 Fetch API 是常用的技术：

AJAX：传统的 AJAX 技术通过XMLHttpRequest对象实现异步数据传输，可在不刷新页面的情况下与服务器进行数据交互，但代码相对繁琐。
Fetch API：是现代浏览器提供的新接口，基于 Promise，语法简洁，功能强大。它可以更方便地发送 HTTP 请求，处理响应数据，并且支持各种请求方法和请求头设置，逐渐成为主流的数据交互方式。

（三）DOM 操作

在表格数据展示功能中，频繁使用了 DOM（Document Object Model）操作：

document.getElementById：通过元素的 id 获取指定元素。
document.createElement：创建新的 DOM 元素。
appendChild：将一个节点添加到另一个节点的子节点列表末尾。DOM 操作是动态更新页面内容的关键，熟练掌握 DOM 操作方法，能够灵活地实现各种页面交互效果。