单表单多提交按钮Ajax请求无响应问题求助

看起来你遇到的核心问题有几个，咱们一个个拆解解决：

1. 未引入jQuery库 #

你提到浏览器提示$无法识别，这是因为你的页面完全没有加载jQuery库，但代码里大量使用了$（jQuery的简写语法）。解决这个问题很简单，在你的自定义<script>标签之前引入jQuery即可：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

也可以下载jQuery的本地版本放在项目中，只要保证引入路径正确就行。

2. 选择器语法错误 #

你的事件绑定选择器$("#getotp btn")是错误的：btn是按钮的类名，选择类名需要加.前缀，正确写法应该是：

$("#getotp .btn").click(function(ev) { ... })

原选择器会尝试寻找#getotp容器下的<btn>标签（不存在这个标签），而非带btn类的按钮，导致事件根本没绑定到目标元素上。

3. DOM加载时机问题 #

如果你的自定义<script>放在页面头部（或者目标表单元素渲染之前），代码执行时#getotp还没被浏览器解析渲染，事件绑定会直接失效。建议把script标签移到</body>标签之前，或者用jQuery的ready方法包裹代码，确保DOM加载完成后再执行绑定：

$(document).ready(function() {
  // 你的事件绑定代码放在这里
});

修正后的完整HTML代码示例 #

<div id="otplogin">
 <form class="form-horizontal" id="getotp" >
 {% csrf_token %}
 <div class="control-group">
 <label class="control-label" for="username">Username</label>
 <div class="controls">
 <input type="text" id="username" name="username" placeholder="Username">
 </div>
 </div>
 <div class="control-group">
 <div class="controls">
 <button type="submit" value='auth' class="btn">Auth</button>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="otp">OTP</label>
 <div class="controls">
 <input type="text" name="otp" id="otp" placeholder="OTP"> <!-- 原生otp类型兼容性差，改为text更稳妥 -->
 </div>
 </div>
 <div class="control-group">
 <div class="controls">
 <button type="submit" value='login' class="btn">Login</button>
 </div>
 </div>
 </form>
 </div>

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#getotp .btn").click(function (ev) {
 ev.preventDefault(); // 阻止表单默认跳转行为
 const btnValue = $(this).val(); // 用val()代替attr("value")，获取值更可靠
 if (btnValue === "auth") {
 console.log("CHECK 1");
 $.ajax({
 type:'POST',
 url:'/getotp2',
 data:{ 
 username: $('#username').val(),
 csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
 },
 success: function(response) {
 console.log('POST1 success', response);
 },
 error: function(xhr, status, error) {
 console.error('POST1 failed:', error); // 新增错误回调，方便调试接口问题
 }
 });
 } else if (btnValue === "login") {
 console.log("CHECK 2");
 $.ajax({
 type:'POST',
 url:'/otplogin',
 data:{ 
 username: $('#username').val(), 
 otp: $('#otp').val(), 
 csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
 },
 success: function(response) {
 console.log('POST2 success', response);
 },
 error: function(xhr, status, error) {
 console.error('POST2 failed:', error); // 新增错误回调
 }
 });
 }
 });
});
</script>

额外优化建议 #

• 将<input type="otp">改为<input type="text">：原生otp类型的浏览器兼容性较差，可能导致输入框异常。
• 给AJAX请求添加error回调：如果后端接口返回错误或网络异常，你能在控制台看到具体错误信息，大幅降低调试难度。
• 后端getotp2视图中，确保OTPEmail函数能正常执行，避免因邮件发送失败导致接口返回错误状态码。

内容的提问来源于stack exchange，提问作者May Y