jQuery无法加载及表单数据无法存入JavaScript对象问题求助

架构老林

2026-6-28

问题解决建议

一、jQuery加载失败（`$ is not defined`）

确认引入顺序：把jQuery的<script>标签放在你的account.js之前加载。示例：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 再引入业务脚本 -->
<script src="account.js"></script>

检查CDN链接有效性：直接在浏览器地址栏打开你使用的CDN链接，确认能正常下载jQuery文件，避免链接拼写错误或失效。
若用npm安装：
- 模块化项目需在account.js顶部添加：import $ from 'jquery';
- 直接在HTML中引入时，写对本地路径：<script src="./node_modules/jquery/dist/jquery.min.js"></script>

规避库冲突：如果页面有其他JS库也使用$，可以用两种方式处理：

// 方式1：改用jQuery代替$
jQuery('selector').method();
// 方式2：自执行函数封装，保留$的使用
(function($) {
  // 你的代码，这里可正常用$
  $('form').on('submit', function() {});
})(jQuery);

用开发者工具排查：打开浏览器Network标签，刷新页面查看jQuery的请求状态。若为404则是路径错误；其他状态码需检查网络或CDN可用性。

二、表单提交数据无法传入函数

阻止表单默认提交行为：表单提交会默认刷新页面，导致控制台输出被清空，需在事件绑定中添加阻止逻辑：
```
$('form').on('submit', function(e) {
  // 阻止页面刷新
  e.preventDefault();
  // 调用处理函数
  formSubmit();
});
```
验证函数调用：在formSubmit和accountCreation函数开头添加调试输出，确认函数是否被触发：
```
function formSubmit() {
  console.log('formSubmit 已触发');
  // 后续逻辑
}
```
检查表单选择器：确保获取表单值时的选择器和HTML元素的id/class一致，示例：
```
// 假设用户名输入框id为username
const username = $('#username').val();
```
排查函数定义：确认函数名拼写正确，无大小写错误或未定义的情况。