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

Question

我创建了一个 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>

Ajax 也正常工作，因为我在服务器中收到 POST 数据。请指教。

<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

Answer 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);
      }
    });
  });
});

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

Why second debugger inside Ajax don't work while testing in Chrome?

ajax

jquery

javascript-debugger