### HTML Form 表单 Action 属性的页面跳转使用方法 `<form>` 标签中的 `action` 属性主要用于指定当表单数据被提交时的目标 URL 或脚本地址。通过该属性，可以实现页面之间的跳转功能。 #### 基础概念 如果未定义 `action` 属性，则表单会默认向当前页面提交数据[^1]。这通常意味着浏览器会在同一页面上重新加载并处理请求。然而，开发者可以通过多种方式利用 `action` 实现不同的页面跳转效果： 1. **相对路径** 当 `action` 的值是一个相对路径时，它表示相对于当前网站根目录或者文件夹的位置来定位目标资源。 ```html <form action="submit-form.php"> <!-- 输入字段 --> <input type="text" name="username"> <button type="submit">Submit</button> </form> ``` 2. **绝对路径 (完整 URL)** 如果需要跨域操作或者其他服务器上的服务作为接收端口，可以直接提供完整的 HTTP(S) 地址。 ```html <form action="https://example.com/process-data"> <!-- 输入字段 --> <input type="password" name="password"> <button type="submit">Login</button> </form> ``` 3. **无动作 (`action=""`) 和锚点 (`action="#"`)** 设置为空字符串或井号(`#`)的行为类似于省略掉整个 `action` 参数——即再次发送至原始请求 URI 下载相同的文档实例。 4. **AJAX 提交防止刷新** 对于更复杂的交互需求比如无需重定向即可更新部分网页内容的情况，可借助 JavaScript 库如 jQuery 来拦截标准行为并通过异步调用来完成任务而不触发全页导航][^[^24]: ```javascript $(document).ready(function(){ $('#myForm').on('submit', function(event){ event.preventDefault(); // 阻止默认提交事件 $.ajax({ url: 'process-ajax-request', method: 'POST', data: $(this).serialize(), // 将表单序列化为查询字符串 success: function(response){ alert('Data submitted successfully!'); }, error: function(xhr, status, errormsg){ console.error(errormsg); } }); }); }); ``` 综上所述，虽然主要用途是用来指明何处处理已填写的数据包体，但合理配置此参数确实能够间接达成某些形式下的视图切换目的；当然实际应用过程中还需考虑安全性等因素以免引入潜在漏洞风险等问题发生。