在网页开发中，HTML元素本身不具备直接调用服务器实例的能力，需要结合JavaScript等脚本语言，通过HTTP请求与服务器建立通信，实现数据交互、功能触发等需求。常见的实现方式包括表单提交、AJAX请求等，不同方式适用于不同的业务场景。
基础方式：表单提交调用服务器
表单是HTML原生支持的交互组件，通过<form>标签的配置，可以直接将用户输入的数据提交到服务器实例。这种方式不需要额外的脚本支持，适合简单的页面跳转和数据提交场景。
表单的核心属性包括action和method，action指定服务器接口的地址，method指定请求方式，常用值为get和post。
<!-- 表单提交示例 -->
<form action="https://ipipp.com/api/submit" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">提交到服务器</button>
</form>
上述代码中，当用户点击提交按钮时，浏览器会将表单内的输入数据打包，按照post方式发送到action指定的服务器地址，服务器处理完成后可以返回新的页面或者处理结果。
进阶方式：AJAX异步调用服务器
表单提交会导致页面刷新，在很多单页应用或者需要局部更新内容的场景中并不适用，这时候可以使用AJAX技术，通过JavaScript发送异步请求，在不刷新页面的情况下与服务器实例交互。
原生的XMLHttpRequest是AJAX的基础实现，也可以直接使用Fetch API，后者是更现代的请求方式，语法更简洁。
使用Fetch API实现请求
以下示例实现了点击按钮后，向服务器发送get请求获取数据，并将返回的内容显示在页面上。
// 获取页面上的按钮元素
const loadBtn = document.getElementById('loadBtn');
// 获取显示结果的容器
const resultContainer = document.getElementById('resultContainer');
// 给按钮绑定点击事件
loadBtn.addEventListener('click', () => {
// 发送fetch请求到服务器实例
fetch('https://ipipp.com/api/getData')
.then(response => {
// 判断响应状态是否正常
if (!response.ok) {
throw new Error('服务器响应异常');
}
// 将响应转为JSON格式
return response.json();
})
.then(data => {
// 将返回的数据渲染到页面
resultContainer.innerHTML = `服务器返回的数据：${data.content}`;
})
.catch(error => {
// 捕获请求过程中的错误
resultContainer.innerHTML = `请求失败：${error.message}`;
});
});
对应的HTML结构如下，按钮和结果容器通过id与JavaScript代码关联：
<button id="loadBtn">点击获取服务器数据</button> <div id="resultContainer"></div>
发送POST请求提交数据
如果需要向服务器提交数据，比如用户填写的表单内容，可以使用post方式的fetch请求，在请求配置中设置请求头和请求体。
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', () => {
// 获取输入框的内容
const userName = document.getElementById('userName').value;
const userAge = document.getElementById('userAge').value;
// 发送post请求
fetch('https://ipipp.com/api/saveUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: userName,
age: userAge
})
})
.then(response => response.json())
.then(data => {
alert('数据提交成功，服务器返回：' + data.message);
})
.catch(error => {
alert('提交失败：' + error.message);
});
});
不同场景的选择建议
如果是简单的页面跳转、传统表单提交场景，优先选择原生表单方式，实现简单且兼容性好；如果是单页应用、需要局部更新内容、不希望页面刷新的场景，优先选择AJAX方式，其中Fetch API比传统的XMLHttpRequest更推荐，语法更清晰，也支持Promise，方便处理异步逻辑。
无论使用哪种方式，都需要注意服务器接口的跨域问题，如果前端页面和服务器实例不在同一个域下，需要服务器配置对应的跨域响应头，否则请求会被浏览器拦截。
常见问题说明
- HTML元素本身不能直接发送请求，必须依赖JavaScript或者表单的原生提交能力
- 请求地址如果是本地测试，可以使用127.0.0.1或者192.168.0.1，不需要替换
- 发送JSON格式的数据时，必须设置
Content-Type为application/json，否则服务器可能无法正确解析请求体 - 所有的网络请求都可能存在失败的情况，必须添加错误处理代码，提升用户体验
HTMLJavaScriptAJAX服务器接口修改时间：2026-06-27 05:33:21