如何通过 JavaScript/jQuery 无按钮提交表单并避免页面刷新-php教程-PHP中文网

如何通过 JavaScript/jQuery 无按钮提交表单并避免页面刷新

本文详解如何不依赖 submit 按钮，而是通过点击任意元素（如 div）触发 jquery ajax 提交表单，实现无刷新、静默的后台数据提交，并解决因函数作用域错误导致的 “function is not defined” 问题。

本文详解如何不依赖 submit 按钮，而是通过点击任意元素（如 div）触发 jquery ajax 提交表单，实现无刷新、静默的后台数据提交，并解决因函数作用域错误导致的 “function is not defined” 问题。

在 Web 开发中，常需实现“无按钮表单提交”——例如用文字链接、图标或卡片区域代替传统

✅ 正确做法：分离 DOM 就绪逻辑与函数定义

submit_1form 是一个普通函数，不应嵌套在 $(document).ready() 中。否则它仅在 DOM 加载时的作用域内有效，而 HTML 中 onclick="submit_1form()" 是在全局作用域下查找该函数，自然报错 ReferenceError: submit_1form is not defined。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

正确结构应为：

函数声明置于全局作用域（即 <script> 标签顶层）；</script>
事件绑定（如 click）放在 $(document).ready() 或简写 $(function(){...}) 中，确保 DOM 元素已就绪。

✅ 推荐代码实现（兼容性好 + 语义清晰）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

⚠️ 关键注意事项

移除 form.submit() 调用：你原代码中 fo1rm.submit() 会触发表单原生提交，导致页面跳转或刷新，与 AJAX 目标冲突。AJAX 提交时必须阻止默认表单行为（本例中因未使用
的 submit 事件，故无需 e.preventDefault()；但若改用 form 的 submit 事件，则必须添加）。
避免手动拼接 query string：使用 data: { key: value } 让 jQuery 自动序列化并 URL 编码，防止特殊字符（如空格、中文、&）引发参数截断或 XSS 风险。
的 action 和 method 可省略
：既然完全由 AJAX 处理，action 留空或删除更清晰；method="POST" 在 AJAX 中由 type 参数控制，非必需。
服务端校验不可省：前端 JS 可被绕过，submit-withdraw.php 必须独立验证 $_POST['acc_name'] 和 $_POST['with_id']，防范空值、注入等风险。