为什么 Ajax 中的第二个调试器在 Chrome 中测试时不起作用？答案

【问题标题】：Why second debugger inside Ajax don't work while testing in Chrome?为什么 Ajax 中的第二个调试器在 Chrome 中测试时不起作用？
【发布时间】：2021-04-24 04:08:59
【问题描述】：

我创建了一个 Ajax 调用并尝试使用 debugger; 在 chrome 中调试它的成功和失败。

第一个调试器语句正常工作，但流程并未在第二个调试器语句处停止，而是在源面板中看到以下内容：

<script type="text/javascript"  id="debugbar_loader" data-time="1611085354" src="http://localhost/my_project/public/?debugbar"></script><script type="text/javascript"  id="debugbar_dynamic_script"></script><style type="text/css"  id="debugbar_dynamic_style"></style>

当我在服务器中接收 POST 数据时，Ajax 也可以正常工作。请多多指教。

<form action="#" method="POST">
  <button type="submit" name="submit_form" class="btn" id="submit_form">Save Changes</button>
</form>

$(document).ready(function() {
  // First Debugger
  debugger;
  
  $("#submit_form").submit(function(e) {
    e.preventDefault();
    var fd = new FormData($(this)[0]);

    // Second Debugger
    debugger;

    var url = form.attr('action');

    $.ajax({
      type: "POST",
      url: url,
      dataType: 'json',
      data: fd,
      success: function(data) {
        alert(data);
      },
      error: function(data) {
        alert(data);
      },
    });
  });
});

JS Fiddle

【问题讨论】：

标签： jquery ajax javascript-debugger

【解决方案1】：

问题是因为submit 事件在form 元素上触发，而不是您选择的button。

事实上，整个submit 处理程序假定this 引用form 元素，假设您使用attr('action') 并将引用传递给FormData() 构造函数。

另外请注意，如果您在 AJAX 请求中发送 FormData，那么您还需要在 AJAX 选项中包含 processData: false 和 contentType: false。

说了这么多，试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST" id="submit_form">
  <button type="submit" name="submit_form" class="btn">Save Changes</button>
</form>

$(document).ready(function() {
  console.log('A'); // debugger

  $("#submit_form").submit(function(e) {
    e.preventDefault();
    var fd = new FormData(this);
    var url = this.action;

    console.log('B'); // debugger
    
    $.ajax({
      type: "POST",
      url: url,
      dataType: 'json',
      data: fd,
      contentType: false,
      processData: false,
      success: function(data) {
        alert(data);
      },
      error: function(data) {
        alert(data);
      }
    });
  });
});

【讨论】：