HTML中的表单数据怎么发送到服务器？数据提交方式-html教程-PHP中文网

要将html表单数据发送到服务器，核心是通过form元素的action和method属性指定目标url和提交方式，最常用的是get和post方法；1. 使用form标签时，设置action属性指向处理数据的服务器端接口，method属性设置为"get"或"post"，浏览器在提交时自动发送数据；2. get方法将数据附加在url查询字符串中，适用于获取数据且不改变服务器状态的场景，但数据量有限且不安全；3. post方法将数据放在请求体中，适合传输敏感或大量数据，更安全且无大小限制；4. 现代开发中常使用javascript的fetch api或xmlhttprequest实现异步提交，提升用户体验，避免页面刷新；5. 文件上传需在form标签中设置enctype="multipart/form-data"，并使用formdata对象配合fetch或xhr发送二进制文件数据，实现灵活高效的异步上传。

HTML中的表单数据怎么发送到服务器？数据提交方式

HTML中的表单数据要发送到服务器，核心就是通过

form

登录后复制

元素的

action

登录后复制

和

method

登录后复制

属性来指定目标URL和提交方式，最常见的是

GET

登录后复制

和

POST

登录后复制

。此外，现代前端开发还会大量使用JavaScript，比如

Fetch API

登录后复制

或

XMLHttpRequest

登录后复制

，来实现更灵活、异步的数据提交，而无需刷新整个页面。

解决方案

要将HTML表单数据发送到服务器，最直接的方式是利用

form

登录后复制

标签。你需要在

form

登录后复制

标签上设置两个关键属性：

```
action
```
登录后复制
：指定数据将要发送到的服务器端URL。这个URL可以是处理表单数据的脚本（例如，一个Node.js的API接口、Python的Flask路由、PHP脚本等）。
```
method
```
登录后复制
：定义数据提交的方式。主要有两种：
```
GET
```
登录后复制
和
```
POST
```
登录后复制
。

一个基本的表单看起来会像这样：

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

<form action="/submit-data" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">提交</button>
</form>

登录后复制

当用户点击

type="submit"

登录后复制

的按钮时，浏览器会收集所有带有

name

登录后复制

属性的表单元素的值，并按照

method

登录后复制

属性指定的方式发送到

action

登录后复制

属性指定的URL。如果是

GET

登录后复制

请求，数据会以查询字符串的形式附加在URL后面；如果是

POST

登录后复制

请求，数据则放在HTTP请求体中。

GET

登录后复制

与

POST

登录后复制

：它们到底有什么区别？

这个问题啊，初学者可能觉得有点模糊，但它其实是Web开发的基础。简单来说，

GET

登录后复制

和

POST

登录后复制

是HTTP协议中两种最常用的请求方法，它们在数据传输方式、适用场景和安全性（相对而言）上都有明显差异。

GET

登录后复制

方法，我觉得它更像是一种“查询”或者“获取”数据的请求。当你用

GET

登录后复制

提交表单时，表单数据会被编码成URL的一部分，以问号

登录后复制

开头，后面跟着键值对，比如

action.php?name=John&age=30

登录后复制

。这玩意儿的优点是简单直接，而且因为数据在URL里，所以可以被浏览器缓存、被历史记录保存，甚至可以直接收藏为书签。但缺点也显而易见的：数据量有限制（不同浏览器和服务器有差异，但通常几KB到几十KB），而且最重要的是，敏感信息（比如密码）会直接暴露在URL中，这在安全上是绝对不能接受的。所以，

GET

登录后复制

通常用于不改变服务器状态、只是获取数据的操作，比如搜索框的查询、文章列表的筛选等。对我来说，只要是涉及到用户隐私或者会改变数据库内容的，我基本不会考虑

GET

登录后复制

。

而

POST

登录后复制

方法，它就是为“提交”或“创建/修改”数据而生的。当你用

POST

登录后复制

提交表单时，数据不会出现在URL里，而是被放在HTTP请求的“body”部分发送给服务器。这就意味着

POST

登录后复制

没有

GET

登录后复制

那样的数据量限制（理论上可以很大），而且数据不会直接暴露在URL中，相对来说更安全一些（虽然也不是绝对安全，因为数据在传输过程中仍然可能被截获）。

POST

登录后复制

请求不会被浏览器缓存，也不会保留在历史记录里，所以你刷新一个

POST

登录后复制

提交后的页面，浏览器通常会提示你是否要重新提交表单。我个人在处理用户注册、登录、发布文章、上传文件这类操作时，

POST

登录后复制

是我的首选，因为它更符合“发送数据给服务器进行处理”的语义。

除了

GET

登录后复制

和

POST

登录后复制

，还有其他提交数据的方式吗？

当然有，而且在现代前端开发中，这些方式的使用频率甚至更高，它们通常都基于JavaScript实现，我们称之为“异步提交”或者“AJAX请求”。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

最常见的两种就是

XMLHttpRequest (XHR)

登录后复制

对象和

Fetch API

登录后复制

。

XMLHttpRequest

登录后复制

是比较传统的做法，它允许你在不刷新整个页面的情况下，向服务器发送HTTP请求并接收响应。比如，你想在用户输入用户名时实时检查这个用户名是否已被占用，或者在不离开当前页面的情况下提交一个评论，

XHR

登录后复制

就能派上用场。它的API相对来说有点啰嗦，但功能非常强大。

// 简单的XHR POST请求示例
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/check-username', true);
xhr.setRequestHeader('Content-Type', 'application/json'); // 告诉服务器我发送的是JSON数据

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('服务器响应:', xhr.responseText);
    }
};

const data = { username: 'testuser123' };
xhr.send(JSON.stringify(data)); // 发送JSON字符串

登录后复制

而

Fetch API

登录后复制

是ES6之后推荐的、更现代、更简洁的异步请求方式，它基于

Promise

登录后复制

，用起来更符合现代JavaScript的编程习惯，也更容易处理异步操作链。当我需要做异步请求时，我几乎总是优先选择

Fetch

登录后复制

。

// 简单的Fetch POST请求示例
const data = { username: 'newuser', email: 'new@example.com' };

fetch('/api/register', {
    method: 'POST', // 指定请求方法
    headers: {
        'Content-Type': 'application/json', // 告诉服务器我发送的是JSON数据
    },
    body: JSON.stringify(data), // 将JavaScript对象转换为JSON字符串发送
})
.then(response => {
    if (!response.ok) { // 检查HTTP状态码是否表示成功
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 解析JSON响应
})
.then(data => {
    console.log('注册成功:', data);
})
.catch(error => {
    console.error('注册失败:', error);
});

登录后复制

这两种方式的优势在于：

用户体验：页面不会闪烁或刷新，用户体验更流畅。
灵活性：可以发送各种类型的数据（JSON、FormData、Blob等），也能更精细地控制请求头和处理响应。
部分更新：可以只更新页面的一部分内容，而不是重新加载整个页面。

提交数据时，如何处理文件上传？

文件上传是一个比较特殊但又非常常见的表单提交场景。你不能简单地用

GET

登录后复制

或常规的

POST

登录后复制

来发送文件内容，因为文件是二进制数据，需要特殊的编码方式。

对于HTML的

form

登录后复制

标签，当涉及到文件上传时，你需要给

form

登录后复制

标签添加一个非常重要的属性：

enctype="multipart/form-data"

登录后复制

。这个属性告诉浏览器，表单数据在发送时要以“多部分表单数据”的形式进行编码，这样服务器才能正确解析出文件内容和其他文本字段。

<form action="/upload-file" method="post" enctype="multipart/form-data">
    <label for="profilePic">选择头像:</label>
    <input type="file" id="profilePic" name="profilePic" accept="image/*">

    <label for="description">描述:</label>
    <textarea id="description" name="description"></textarea>

    <button type="submit">上传</button>
</form>

登录后复制

这里的

input type="file"

登录后复制

就是用来选择文件的。

name="profilePic"

登录后复制

是文件字段的名称，服务器端会通过这个名称来获取上传的文件。

accept="image/*"

登录后复制

则是一个提示，告诉用户只能选择图片文件，但它不是强制性的，服务器端仍然需要进行文件类型和大小的校验。

在JavaScript异步上传文件时，我们通常会用到

FormData

登录后复制

对象。

FormData

登录后复制

提供了一种构建键值对集合的方式，这些键值对可以包含文件，并且它会自动处理

multipart/form-data

登录后复制

的编码细节，非常方便。

// 使用Fetch API上传文件
const fileInput = document.getElementById('profilePic');
const descriptionTextarea = document.getElementById('description');

const formData = new FormData(); // 创建一个FormData对象
formData.append('profilePic', fileInput.files[0]); // 将文件添加到FormData
formData.append('description', descriptionTextarea.value); // 添加其他文本字段

fetch('/upload-file', {
    method: 'POST',
    body: formData, // 直接将FormData对象作为请求体发送，Fetch会自动设置正确的Content-Type
})
.then(response => response.json())
.then(data => {
    console.log('文件上传成功:', data);
})
.catch(error => {
    console.error('文件上传失败:', error);
});

登录后复制

这种方式的好处是，你可以在文件上传过程中显示进度条，或者在上传完成后立即处理服务器的响应，而无需刷新页面，大大提升了用户体验。服务器端在接收到