2

我创建了一个 Ajax 调用并尝试使用debugger;.

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

<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小提琴

4

1 回答 1

2

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

事实上，如果您使用并将引用传递给构造函数，则整个submit处理程序假定this引用元素。formattr('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);
      }
    });
  });
});
于 2021-01-19T20:03:25.807 回答